当前位置: 首页 > Web前端 > vue.js

vue项目封装表格组件思路整理

时间:2023-04-01 11:52:14 vue.js

为什么要封装表格组件?后台管理系统中的表使用频率高,减少了与表相关的业务代码,便于后期统一修改和维护。比如显示表格的内容,显示单元格以外的省略号等。表格组件如何封装?表格组件的功能/特点是:表格列由父组件动态创建。表格列类型包括:顺序行、校验列、常用数据显示列,cell根据父组件的要求动态渲染列(例如操作列为按钮,状态列显示开关标签,等)表格分页功能如何实现表格组件并完成功能/特性:选择render函数还是模板实现组件:render函数无法监听组件自定义事件,label层级不清晰作为模板,所以使用模板包。注意:render函数一般用于标签层级较少,更强调逻辑封装的组件。比如封装输入框等。模板用于组件的n次封装,最后一层用于用户封装。标签结构清晰,逻辑处理少。表格列渲染:父组件通过列配置动态渲染列。包含sequence列和check列的动态渲染,根据列配置的类型决定。分页功能实现:传递分页配置,表格组件决定是否显示分页,以及分页的相关配置,如total等。动态渲染cell——以element-ui为例:接收renderCell自定义属性table-column.js组件并为table-column.js组件列添加renderCell属性。table-column.js渲染单元格时,调用column.renderCell引用table-column.js,可以使用自定义table-column.js的el-table-column组件。父组件传给table-column.js的renderCell属性,renderCell方法为父组件动态渲染单元格内容