el-table的二次封装详细版（一）

最近一直在做公司的后台管理系统。就想着整理一些相关组件，方便自己方便他人。
我这里整理两个版本，都觉得挺好用。很常见，也是借鉴。然后整理后贴出来。代码我尽力贴全一些。
先发一个简单版的。

<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更贴合底层吧.
文笔一般,还望海涵...我知道这个组件还有很多的可优化地方,随时可以指教.