vue3 + antdv3 实现table表格的行合并和列合并

还是通过colSpan和rowSpan来设置表格的行合并和列合并

行合并示例： 需求：合并Test列开头4行

//表格配置
const tableColumns = Object.freeze([
    {
        title: "编号",
        customRender({ index }) {
            return index + 1;
        }
    },
    {
        title: "Test",
        dataIndex: "tankNo",
        customCell: sharedOnCell,
    },
    {
        title: "Test2",
        dataIndex: "tankName",
    },

    {
        title: "Test3",
        dataIndex: "finishTime",
        customRender({ text }) {
            return text && dayjs(text).format();
        }
    },
    {
        title: "Test4",
        dataIndex: "finishname",
    },
]);

//sharedOnCell自定义函数
const sharedOnCell = (_, index) => {
    //索引0开始向后合并四行
    if (index === 0) {
        return {
            rowSpan: 4,
        };
    }
    //索引1，2，3不渲染
    if(index > 0 && index <= 3){
        return {
            rowSpan: 0,
        };
    }
};

<a-table
    bordered
    row-key="id"
    class="tableColor"
    size="small"
    :loading="loadingData"
    :columns="tableColumns"
    :scroll="loadScroll"
    :data-source="tableData"
    :pagination="false">
</a-table>

列合并示例： 需求：Test2一列拆分为两列

const tableColumns = Object.freeze([
    {
        title: "编号",
        customRender({ index }) {
            return index + 1;
        }
    },
    {
        title: "Test",
        dataIndex: "tankNo",
        customCell: sharedOnCell,
    },
    {
        title: "Test2",
        dataIndex: "tankName",
        colSpan:2,
    },
    {
        title: "Test6",
        dataIndex: "test",
        colSpan:0,
    },
    {
        title: "Test3",
        dataIndex: "finishTime",
        customRender({ text }) {
            return text && dayjs(text).format();
        }
    },
    {
        title: "Test4",
        dataIndex: "finishname",
    },
]);

需求：除开索引10和索引11，Test2拆分的两列再合并为一列

const tableColumns = Object.freeze([
    {
        title: "编号",
        customRender({ index }) {
            return index + 1;
        }
    },
    {
        title: "Test",
        dataIndex: "tankNo",
        customCell: sharedOnCell,
    },
    {
        title: "Test2",
        dataIndex: "tankName",
        colSpan:2,
        customCell: sharedOnCellTwo,
    },
    {
        title: "Test6",
        dataIndex: "test",
        colSpan:0,
    },
    {
        title: "Test3",
        dataIndex: "finishTime",
        customRender({ text }) {
            return text && dayjs(text).format();
        }
    },
    {
        title: "Test4",
        dataIndex: "finishname",
    },
]);

const sharedOnCellTwo = (_, index) => {
    //除开索引10和索引11这两列，其它都合并
    if (index!== 10&&index !==11) {
        return {
            colSpan: 2,
        };
    }

};

需求：Test2索引10和索引11右边的两行合并为一行

const tableColumns = Object.freeze([
    {
        title: "编号",
        customRender({ index }) {
            return index + 1;
        }
    },
    {
        title: "Test",
        dataIndex: "tankNo",
        customCell: sharedOnCell,
    },
    {
        title: "Test2",
        dataIndex: "tankName",
        colSpan:2,
        customCell: sharedOnCellTwo,
    },
    {
        title: "Test6",
        dataIndex: "test",
        colSpan:0,
        customCell: sharedOnCellThree,
    },
    {
        title: "Test3",
        dataIndex: "finishTime",
        customRender({ text }) {
            return text && dayjs(text).format();
        }
    },
    {
        title: "Test4",
        dataIndex: "finishname",
    },
]);

const sharedOnCellThree = (_, index) => {
    //索引10合并索引11
    if (index== 10) {
        return {
            rowSpan: 2,
        };
    }
    //索引11不渲染
    if (index== 11) {
        return {
            rowSpan: 0,
        };
    }
};