如何在 vue3 + element plus 中实现行列均为动态数据的 excel 表格渲染，并且包含二级分类？
针对以下场景：
需要在 vue3 + element plus 项目中创建 excel 表格，其中行列均为动态数据，且包含二级分类。具体效果如下图：
[图片]
立即学习“前端免费学习笔记（深入）”；
数据结构如何设计呢？
解答：
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)
登录后复制
上述代码实现了行列动态的 excel 表格渲染，可以满足二级分类下的数据展示需求。
以上就是如何使用 Vue3 + Element Plus 渲染包含二级分类的行列动态 Excel 表格？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2661717.html
