vue项目封装table组件思路整理

为什么需要封装table组件？

后台管理系统表格使用频率高，减少关于table的业务代码，且便于后期统一修改、便于后期维护。如给table内容展示，超出单元格以省略号展示等。

怎么封装table组件？

table组件具有的功能/特点有：

1. table列由父组件动态创建
2. table列类型包含：序列行、复选列、普通数据展示列、单元格根据父组件要求动态渲染列（如，操作列为button，状态列展示switch标签等）
3. table分页功能

怎样实现table组件并完成功能/特点：

1. 选择render函数还是template实现组件：render函数无法监听组件自定义事件，且标签层级不如template清晰，所以采用template封装。

   注：render函数一般用于标签层级少，偏重逻辑封装的组件。如封装input框等。template用于组件n次封装，最后一层供用户使用封装，标签结构清晰，逻辑处理少。

2. table列渲染：父组件传递列配置动态渲染列。包含实现序列和复选列的动态渲染，根据列配置的type决定。
3. 分页功能实现：传递分页配置，table组件判断是否展示分页，以及分页的相关配置，如total等。

4. 动态渲染单元格——以element-ui为例：

   1. 为table-column.js组件接收renderCell自定义属性
   2. 为table-column.js组件column添加renderCell属性。再table-column.js渲染单元格时调用的为column.renderCell
   3. 引用table-column.js，用自定义table-column.js的el-table-column组件即可。
   4. 父组件传递给table-column.js的renderCell属性，renderCell方法为父组件动态渲染单元格内容