Element表格（el-table）如何封装_vue2 elementui el-table封装

前言

vue2搭配使用的框架基本都是Element-ui，如何开发时每次都过去复制，需要删除一部分，增加一部分，如果碰到的是表单类型的table表格，那更麻烦。因此在符合公司应用场景下面对Element的el-table表格进行了二次封装。

一、效果展示

一个el-table表格的封装，需要考虑多个方面，实用，适用，自适应，动态并且尽量不脱离element文档（因为你不一定会写文档）

这是我使用效果，这个表格的封装，还集成了分页

二、基础封装

el-table表格的封装不是一蹴而就，要根据使用场景来一步一步完善，也许你要说我把Table Attributes里面的属性全部封装进去不就行了，这样确实可以，但没必要，像border、size、show-header等一些属性，其实是不用封装，直接写死的，因为一套系统，不会存在不同风格的table表格。

el-table的封装第一步，就是以Element里面el-table的基础表格为模板，进行改造。

 <template>
   <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableHead"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || '80'">
      </el-table-column>
    </el-table>
   </div>
  </template>
 
<script>
    export default {
    props: {
         tableData: {
              type: Array, // 表格
              default: () => [],
            },
        tableHead: {
              type: Array, // 表格
              default: () => [], // 举个荔枝 [{prop: 'name', label:'名字', width: '180'}]
         },
    },
      data() {
        return {
          
        }
      }
    }
  </script>

tableHead: Array，按上方代码，其中有prop（字段key），label（表头label）、width（单元宽度）三个属性

tableData：Array，按Element-ui的来

这样一个简单地额表格就封装完成了，后面只用不停的写JSON文件就行。

三、封装进阶

虽然上一步已经封装成功了，但是过于简陋没法使用，需要进一步封装,比如序号、复选框、高度自适应，如有需要，可以前往仓库查看

npm-publish-test: NPM包发布配置模板，内嵌有表格，搜索，表单插件。使用详情请看主页https://gitee.com/cainiao_web/npm-publish-test.git