最近始终在做公司的后盾管理系统。就想着整顿一些相干组件，不便本人不便别人。
我这里整顿两个版本，都感觉挺好用。很常见，也是借鉴。而后整顿后贴出来。代码我尽力贴全一些。
先发一个简略版的。
<template>
<div class="PublicTable">
<!-- 主题 el-table 一些设置表头可依据状况增加 -->
<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#f8fbff'}" @selection-change="handleSelectionChange" :height="tableHeight">
<!-- 全选单选 -->
<el-table-column v-if="configFlag.selection" align="center" width="55" type="selection" />
<!-- 序号列 -->
<el-table-column v-if="configFlag.index" align="center" width="100" type="index" :index="1" :label='configFlag.indexName ||" 序号 "' />
<!-- 循环遍历表头展现数据 -->
<el-table-column v-for="item in tableTitleData" :key="item.value" :width="item.width ||''" :prop="item.value" :label="item.label" :align="item.align ||'center'":sortable="item.sortable"header-align="center">
<template slot-scope="scope">
<!-- 依据需要增加成果 返回的 slot 能够优化. 本人来吧. -->
<slot v-if="item.slotname" :scope="scope" :name="item.slotname" />
<div v-else>
<span>{{scope.row[item.value] }}</span>
</div>
</template>
</el-table-column>
</el-table>
<pagination v-if="configFlag.needPage" :total="pageValue.total" :pageNum="pageValue.pageNum" :pageSize="pageValue.pageSize" class="fr" @sizeChange="sizeChange" @currentChange="currentChange" />
</div>
</template>这里是组件主题局部，简略来说就是把 el-table 中的属性数据显示都是用父组件传进来，都能够自定义。这样不同页面不同格调列表都实用。配合分页组件一起封装，可显示可暗藏
上面是组件 props
props: {
tableTitleData: { // 表头数据 文案和绑定值，以及须要非凡解决的 slot
type: Array,
default: () => []
},
tableData: {
type: Array, // 后盾数据
default: () => []
},
pageValue: { // 分页数据
type: Object,
default: () => {
return {
pageNum: 1,
pageSize: 10,
total: 0
}
}
},
configFlag: {// 配置 其余 table 配置顺次增加
type: Object,
default: () => {
return {
needPage: false, // 是否须要排序
selection: false, // 是否须要多选
index: false // 是否须要序号
// 这里不全面，可依据理论状况增加
}
}
},
tableHeight: { // 能够监听屏幕高度获取。// 高度
type: Number,
default: () => null}
},还有几个办法，简略带过
// 翻页
sizeChange(val) {this.$emit('handleChange', { pageSize: val})
},
// 设置条数
currentChange(val) {this.$emit('handleChange', { pageNum: val})
},
// 多选
handleSelectionChange(val) {this.$emit('handleSelectionChange', val)
}到这里组件就封装完了.. 接着来应用
<!-- 组件须要的参数和接管的办法 -->
<publicTable :configFlag="configFlag" :table-title-data="tableTitleData" :table-data="tableData" :pageValue="searchParams" @handleChange='handleChange' :tableHeight='tableHeight - 60'>
<!-- 须要非凡解决的数据 -->
<div slot="typeName" slot-scope="props">
<span v-if="!props.scope.row.type"> 类型 </span>
<span v-else> 非凡类型 </span>
</div>
<div slot='statusName' slot-scope="props">
<el-tooltip class='item' effect='dark' placement='right-end' content={porps.scope.row.errMsg}>
<span v-if="props.scope.row.status === 0" style="color:red;"> 待发布 </span>
</el-tooltip>
<span v-else-if="props.scope.row.status === 1"> 已公布 </span>
<span v-else> 已下架 </span>
</div>
<!-- 一般性的操作按钮 -->
<div slot="testAction" slot-scope="props">
<el-button v-if="props.scope.row.status !== 1" type="text" @click="isRelease(props.scope)" v-preventReClick> 公布 </el-button>
<el-button v-else type="text" @click="isDisable(props.scope)" v-preventReClick> 下架 </el-button>
<el-button type="text" @click="isEdit(props.scope)" v-preventReClick> 批改 </el-button>
<el-button type="text" @click="isCopy(props.scope)" v-preventReClick> 复制 </el-button>
</div>
</publicTable>这里是应用在父组件的 table 组件, 依据咱们的业务需要. 当初看起来这个 html 也没少写多少, 不过也简洁很多, 对于大多初学者来说, 集体感觉还是挺好用的. 简略易懂. 下一篇会写一个更好用的. 不多说, 把这个先写完. 接下来就是解决 data 数据, 组件引入就本人来吧
configFlag: { // 依据需要设置
needPage: true, // 须要分页
index: true // 须要序号
// 其余 table 配置顺次增加
},
tableTitleData: [ // 咱们须要绑定的数据表头 只是举例~~~
{
value: 'type',// 匹配字段
label: '类型', // 表头文案
slotname: 'typeName' // 非凡解决列 应用在下面
},
{
value: 'name',
label: '名称'
},
{
value: 'status',
label: '状态',
slotname: 'statusName'
},
{
label: '操作',
width: '240px',
slotname: 'testAction'
}
],
tableData: [], // 申请后数据.当初应用就完结了.. 绝对应的办法就不写了, 集体比拟懒. 本人补充吧.. 相比拟是不是简洁了一些, 理论应用起来比较简单, 组件的意义在于可高效复用, 这样简略的封装也做到了, 可是我感觉对性能上没多大进步, 因为 vue 类框架主导的就是数据扭转视图, 操作数据能力更好施展性能, 不过能够本人依照这样的写一写, 对于初学者的倡议吧.
下一期二次封装的还是 el-table, 更多的是操作数据,template 中也就只须要几行代码就 ok, 用的数据 render 函数 …render 更贴合底层吧.
文笔个别, 还望海涵 … 我晓得这个组件还有很多的可优化中央, 随时能够指教.