如何在 vue3 + element plus 网页开发中，使用 el-table 表格组件完成横、列都是动态数据渲染，并且动态数据中含有二级分类？
为了满足此需求，首先需要定义模拟后台返回的表格头部信息和表格数据信息。然后，使用 javascript 代码对表格数据进行合并，即合并相同分组和生产单的数据。最后，使用 arrayspanmethod 方法设置表格的合并行。
以下是代码实现：
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 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 } }}
登录后复制
这样就可以实现表格横、列都是动态数据渲染，并且动态数据中含有二级分类的需求。
以上就是如何在 Vue3 + Element Plus 中使用 el-table 表格组件实现横、列都是动态数据渲染，并且动态数据中含有二级分类？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2661599.html
