此处举例, 合并第一列 第一行第n行, 第n行第n+m行
// html部分
<a-table
bordered
:pagination="false"
:columns="columns"
:data-source="tableData"
:scroll="{ x: 1500, y: 1500 }"
></a-table>
//js部分
columns: [
{
title: '一级指标',
dataIndex: 'targetName',
width: 150,
customCell: (record, rowIndex) => {
// 合并列
return this.mergeCellsSlot(record, rowIndex);
},
fixed: 'left',
},
{
title: '二级指标',
dataIndex: 'secondTargetName',
width: 250,
customCell: (record, rowIndex) => {
return this.mergeCellsSlotTwo(record, rowIndex);
},
fixed: 'left',
},
{
title: '三级指标',
dataIndex: 'targetWorkable',
width: 500,
fixed: 'left',
},
],
// 合并一级单元格
mergeCellsSlot(record, rowIndex) {
// 开始下标
const index = this.tableData.findIndex((item) => item.targetName == record.targetName);
// 需要合并的单元格数
let rowSpanNum = 0;
this.tableDatas.forEach((item) => {
if (item.targetName == record.targetName) {
rowSpanNum++;
}
});
// 结束下标
let indexIdLength = index + rowSpanNum;
return {
// 相同名称(判断条件自己定) 的, 相邻的
// 设置 初第一个之外的 都隐藏
style: {
display: index < rowIndex && rowIndex < indexIdLength ? 'none' : undefined,
},
//设置 row-span
attrs: {
rowSpan: rowIndex === index ? rowSpanNum : 1,
},
};
},