Part.1 为什么要二次封装？

这是 Element 网站的 table 示例：

上面的表格字段较少，代码数量不多，但是当我们在开发项目的时候，可能表格字段很多并且多处用到表格，那我们的代码量就会非常多而且冗杂，所以我们需要进行二次封装，从而精简代码量

Part.2 遇到的问题

按照暂时项目所需进行的二次封装，遇到的问题如下：

1. 为表格添加序号列时，翻页操作发现每一页的序号都是从1开始

2. 操作列如何封装/需要给某一个列自定义怎么办？

Part.3 解决

问题一 可参考：https://www.cnblogs.com/langxiyu/p/10641060.html

问题二 关于操作列/自定义列我使用了 slot  ， 具体实现如下：

封装：

调用：

HTML

JS

tableData:[], columns: [      {label: '名称', prop: 'adName'},      {label: '链接', prop: 'adUrl'},      {label: '排序', prop: 'sort'},      {slot: 'operate'}], // 操作列 loading: true, pageObj: {     size: 10,     total: 1,     currentPage: 1,     func:(currentPage) =>{        this.pageTurning(currentPage)     } },

二次封装解决，这样执行每个需要调用表格的地方代码可操作性更强，代码更加清晰明了！当然更多表格功能可自行再次添加~~~