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

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

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

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

/**
 * @description 获取合并单元格rowSpan集合
 * @param {Array} dataScroce 数据源
 * @param {String} filed 需要合并的字段
 * @returns {Array} 该字段下单元格rowSpan集合
 */
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]
            }
        }
    }
])