Ant Design Vue实现a-table表格单元格合并（列/行合并）

Ant Design Vue 实现 a -table 表格单元格合并（列 / 行合并）

【永乐社区，博客，chat gpt】点我体验

a-table 表格行合并（相同项），列合并同理。Ant Design Vue 文档有说明，当单元格 rowSpan 或者 colSpan 为 0 时不显示，可以通过 getRowspan 方法获取到每一条数据对应的 rowSpan 或者 colSpan，设置给 rowSpanArr 数组。

const getRowspan = (dataScroce, filed) => {
    let spanArr = [];
    let position = 0;
    dataScroce.forEach((item, index) => {
        if (index === 0) {
            spanArr.push(1);
            position = 0;
        } else {
            
            if (dataScroce[index][filed] === dataScroce[index - 1][filed]) {
                spanArr[position] += 1;
                spanArr.push(0);
            } else {
                spanArr.push(1);
                position = index;
            }
        }
    });
    return spanArr
};
const rowSpanArr=ref([])

const dataSource = ref([
	{
		id:1,
		name:"张三"
	},
	{
		id:2,
		name:"张三"
	},
	{
		id:3,
		name:"李四"
	}
])
rowSpanArr.value = getRowspan(dataSource.value,'name')
const columns = ref([
    {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        customCell: (record, rowIndex, column) => {
            return {
                rowSpan:rowSpanArr.value[rowIndex]
            }
        }
    }
])