el-table 合并单元格

参考文章：vue3.0 el-table 动态合并单元格 - flyComeOn - 博客园

<el-table :data="tableData" border empty-text="暂无数据" :header-cell-style="{ background: '#f5f7fa' }" class="parent-table" :span-method="objectSpanMethod">

getAll().then((rsp) => {if (rsp.status === HTTPStatus.OK) {tableData.value = rsp.dataconst colFields = ['groupNo', 'name', 'description', 'operation']setTableRowSpan(tableData.value, colFields)}}).catch(() => {})// 设置合并的行和列
const setTableRowSpan = (tableData, colFields) => {let lastItem = []// 循环需要合并的列colFields.forEach((field, index) => {tableData.forEach((item) => {// 存值，把合并字段存入行，为了合并单元格时检索列是否含有该字段item.mergeCell = colFields// 合并的字段出现的次数const rowSpan = `rowspan_${field}`// 比较上一次的存值和该轮的合并字段，判断是否合并到上个单元格if (colFields.slice(0, index + 1).every((e) => lastItem[e] === item[e])) {// 如果是，合并行；item[rowSpan] = 0 // 该轮合并字段数量存0// 上轮合并字段数量+1lastItem[rowSpan] += 1} else {//初始化进入&& 如果不是，完成一次同类合并，lastItem重新赋值，进入下一次计算item[rowSpan] = 1 // 该轮合并字段第一次出现，数量存1// 改变比较对象，重新赋值，进行下一次计算lastItem = item}})})
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {if (row.mergeCell.includes(column.property)) {const rowspan = row[`rowspan_${column.property}`]if (rowspan) {return { rowspan: rowspan, colspan: 1 }} else {return { rowspan: 0, colspan: 0 }}}
}