最近始终在做公司的后盾管理系统。就想着整顿一些相干组件，不便本人不便别人。
我这里整顿两个版本，都感觉挺好用。很常见，也是借鉴。而后整顿后贴出来。代码我尽力贴全一些。
先发一个简略版的。
<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更贴合底层吧.
文笔个别,还望海涵...我晓得这个组件还有很多的可优化中央,随时能够指教.