vue3+el-table组件封装（理论部分）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

封装el-table组件为公共组件，封装为vue3.0+element-plus版本；使用element ui的可以参考，需要改个别内容方可套用。
表格组件使用el-table；分页组件使用el-pagination；
实现功能：
1、在项目页面中可实现多次复用。
2、页面传入表头数据、表格数据来显示表格，后端控制分页。
3、通过当前页面设置可自定义内容（props传值）：

1、是否使用插槽；
2、是否指定表格高度；
3、是否指定分页页码数；
4、是否使用small类型分页；
5、是否显示分页；
6、是否选中后显示高亮；
7、是否在鼠标移上去后显示被遮盖的全部内容；
8、是否使用斑马纹行；
9、是否显示边框；
10、是否行内含有子内容；

父传子（props传值）传入的表头数据格式为：

let tableHeaders2= [
        {field:'field1',title:'标题1'},
        {field:'field2',title:'标题2',width:100},
      ]

  表头数据中可以带有格式化属性，这个自己需要额外判断。 目前使用的格式化属性有宽度width，可以指定表格这一列的宽度（或最小宽度）。

  传入分页相关的数据：(这些数据控制页码) 需要使用$refs传向的数据包含分页相关数据和表格数据；

let res = {
  "pageInfo": {
    "pageNum": 1,//页码
    "pageSize": 10,//每页行数
    "pageCount": 1//总页数
  },
  "total": 9,//总行数
  "rows": [//表格数据
    { "field1": "内容1", "field2": "内容2" },
    { "field1": "内容11", "field2": "内容22" },
  ]
},

注意：

rows中的key对应tableHeaders2的值，也就是field字段是关乎数据对应的；

因为我的是异步调用接口，所以用$refs方法传para和tableData

this.$refs.publicTable.getTData(this.para,res);

具体代码部分请看下篇文章： vue3+el-table组件封装（代码部分）