vue3 + element plus 实现复杂表格渲染
问题：如何使用 vue3 + element plus 的 el-table 组件实现下图所示的复杂表格？横、列都是动态的，且包含两级分类，部分单元格需要合并。
解决方案：
html 代码：
立即学习“前端免费学习笔记（深入）”；
{{ scope.row[item.prop][list.prop] }}
登录后复制
js 代码：
// 模拟后台返回的表格头部信息const headerList = ref([ { label: '达飞', prop: 'column1', subList: [ { label: '保理当日', prop: 'day' }, { label: '保理累计', prop: 'total' } ] }, { label: '农行', prop: 'column2', subList: [ { label: '农行秦分当日', prop: 'day' }, { label: '农行秦分累计', prop: 'total' } ] }])// 模拟后台返回的表格数据信息const tableData1 = ref([ { group: '海港组', total: 123, person: 'aa', column1: { day: '500', total: 3000 }, column2: { day: 100, total: 3000 } }, { group: '海港组', total: 123, person: 'bb', column1: { day: '500', total: 3000 }, column2: { day: 100, total: 3000 } }, { group: '海港组', total: 123, person: 'cc', column1: { day: '500', total: 3000 }, column2: { day: 100, total: 3000 } }, { group: '其他组', total: 123, person: 'cc', column1: { day: '500', total: 3000 }, column2: { day: 100, total: 3000 } }, { group: '其他组', total: 123, person: 'cc', column1: { day: '500', total: 3000 }, column2: { day: 100, total: 3000 } }, { group: '其他组', total: 234, person: 'cc', column1: { day: '500', total: 3000 }, column2: { day: 100, total: 3000 } }])const groupArr = ref([]) // 用于合并组const groupPos = ref(0) // 合并行数默认值const totalArr = ref([]) // 用于合并生产单const totalPos = ref(0) // 合并生产单默认值// 表格行合并方法const merge = (tableData) => { // 要合并的数组的方法 groupArr.value = [] groupPos.value = 0 totalArr.value = [] totalPos.value = 0 for (var i = 0; i { if (columnIndex === 0) { // 合并组 const _row_1 = groupArr.value[rowIndex] const _col_1 = _row_1 > 0 ? 1 : 0 // 如果被合并了_row=0则它这个列需要取消 return { rowspan: _row_1, colspan: _col_1 } } else if (columnIndex === 1) { // 第二列的合并方法,合并生产单 const _row_2 = totalArr.value[rowIndex] const _col_2 = _row_2 > 0 ? 1 : 0 return { rowspan: _row_2, colspan: _col_2 } }}merge(tableData.value)
登录后复制
说明：
表格头部数据的处理使用 headerlist，其中的 sublist 存储了二级分类数据。表格行合并通过 arrayspanmethod 函数实现，其中 grouparr 和 totalarr 分别用于合并组和生产单。merge 函数用于执行数据的先预处理，根据组和生产单信息计算出合并行数和列数。
注意：
目前此解决方案支持前两列相同数据的合并。动态列可以根据实际需求添加更多字段。
以上就是如何使用 Vue3 + Element Plus 的 el-table 组件实现带两级分类、部分单元格合并的复杂表格？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2661701.html
