Vue3 + Element Plus 开发网页，使用 el-table 表格组件完成横、列都是动态数据的渲染，并且动态数据中含有二级分类？-灵析社区
超好看鸭大佬们，请问在 Vue3 + Element Plus 网页开发中，使用 el-table 表格组件能否实现如下图所示的复杂表格。 横、列都是动态，而且都含有2级（固定2级），且有单元格合并（如图），希望前端界大牛帮忙看一下！谢谢了！感谢！  数据结构毫无思路。
中年复健狗先看下效果图
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/7f2c88233a3dc72f81138ef87d3d4895.png)
这个需求主要点就是表格列动态渲染和行合并
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)
基本上满足了需求，动态列还有其他字段可以按照格式添加，合并行目前支持前两列相同数据合并