横、列动态渲染，含有二级分类的 el-table 表格
在 vue3 + element plus 中实现复杂的 el-table 表格功能，如横、列动态渲染，含有二级分类，具体包含以下步骤：
html 代码：
{{ scope.row[item.prop][list.prop] }}
js 代码：
立即学习“前端免费学习笔记（深入）”；
// 模拟后台返回的表格头部信息const headerList = [ { label: '达飞', prop: 'column1', subList: [ { label: '保理当日', prop: 'day' }, { label: '保理累计', prop: 'total' } ] }, { label: '农行', prop: 'column2', subList: [ { label: '农行秦分当日', prop: 'day' }, { label: '农行秦分累计', prop: 'total' } ] }];// 模拟后台返回的表格数据信息const tableData = [ { 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 = [];// 用于合并生产单const totalArr = [];// 表格行合并方法const merge = (tableData) => { for (var i = 0; i { if (columnIndex === 0) { // 合并组 const _row_1 = groupArr[rowIndex]; const _col_1 = _row_1 > 0 ? 1 : 0; return { rowspan: _row_1, colspan: _col_1 }; } else if (columnIndex === 1) { // 合并生产单 const _row_2 = totalArr[rowIndex]; const _col_2 = _row_2 > 0 ? 1 : 0; return { rowspan: _row_2, colspan: _col_2 }; }};merge(tableData.value);
此代码可实现根据动态数据渲染表格，横、列均为动态，且支持二级分类的合并和展示。
以上就是如何在 Vue3 + Element Plus 中实现复杂的 el-table 表格功能，如横、列动态渲染，含有二级分类，并支持合并行和列？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494339.html
微信扫一扫 
支付宝扫一扫 
