Antd Vue中使用table组件把相同名称的合并单元格---只需两步

当前效果：

想要的效果：

第一步：在获取table数据的地方处理数据

function getTableList () {getDataList().then(res => {if (res.code == 200 && res.data) {const list = res.datalet columnIndex = 0 //第一条数据let rowSpan = 1 //合并行数list.map((obj, i) => {// 合并单元格处理-startif (i < list.length - 1) {const nextI = i + 1 //下一条数据index// 注意：当前合并的是名称name列，请按需修改！！！！！if (list[columnIndex].name == list[nextI].name) { //判断当前和下一条名字是否一致rowSpan = rowSpan + 1if (columnIndex != i) {list[i].rowSpan = 0// 最后一个特殊处理if (!list[nextI + 1]) {list[list.length - 1].rowSpan = 0list[columnIndex].rowSpan = rowSpan + 1}} else {list[i].rowSpan = rowSpan}} else {list[i].rowSpan = 0 list[columnIndex].rowSpan = rowSpan //当节点合并行数columnIndex = columnIndex + rowSpan //下一个合并节点rowSpan = 1 //重置合并行数// 最后一个特殊处理if (list.length == list[nextI]) {list[list.length - 1].rowSpan = 1}}}// 合并单元格处理-end})}})
}

第二步：修改columns，合并哪一列就在哪一列下写customCell

const columns = ref([{title: '名称',dataIndex: 'name',key: 'name',width: 180,customCell: (row, index) => {return {rowSpan: row.rowSpan}}},{title: '日期',dataIndex: 'dataTime',key: 'dataTime'},{title: '概述',dataIndex: 'overview',key: 'overview',ellipsis: true}
])