el-table 如何合并单元格

一、前言

在使用el-table合并单元格时发现官方文档中对于rowspan、colspan两个栏位的含义并没有做过多解释，在此记录一下其含义。下列为官方文档中对于rowspan、colspan的描述：

二、el-table中的rowspan、colspan含义

• rowspan：需要合并几行（需要向下合并几行）
• colspan：需要合并几列（需要向右合并几列）

例如需要将下列表格中连续相同行中的班级栏位合并起来：

就需要将rowspan设置为下图红色数字：

三、代码示例（仅列示了js代码）：

let originArray = [
    { className: "一班" },
    { className: "一班" },
    { className: "二班" },
    { className: "二班" },
    { className: "二班" },
    { className: "三班" },
]
// let targetArray = [
//     { className: "一班", rowspan: 2 },
//     { className: "一班", rowspan: 0 },
//     { className: "二班", rowspan: 3 },
//     { className: "二班", rowspan: 0 },
//     { className: "二班", rowspan: 0 },
//     { className: "三班", rowspan: 1 },
// ]
function generateRowSpan(originArray) {
    let currentKey = "className";
    let initRowSpan = 1;

    //#region 计算本行及后行paramKey连续相同的个数
    for (let i = originArray.length - 1; i >= 0; i--) {
        let currentRow = originArray[i];
        if (i == originArray.length - 1) {
            currentRow.rowspan = initRowSpan;
            continue;
        }
        let nextRow = originArray[i + 1];

        let currentValue = currentRow[currentKey];
        let nextValue = nextRow[currentKey];

        if (currentValue == nextValue) {
            currentRow.rowspan = nextRow.rowspan + 1;
        } else {
            currentRow.rowspan = initRowSpan;
        }
    }
    //#endregion
    //#region 仅保留连续相同的第一个，其他都都置为0
    for (let i = originArray.length - 1; i >= 0; i--) {
        let currentRow = originArray[i];
        let privRow = originArray[i - 1];

        let currentValue = currentRow[currentKey];
        let privValue = privRow ? privRow[currentKey] : "";

        if (currentValue == privValue) {
            currentRow.rowspan = 0;
        }
    }
    //#endregion
}

const spanMethod = ({ row, column, rowIndex, columnIndex, }) => {
    if (columnIndex == 1 || columnIndex == 0) {
        const rowspan = rightTopTableDataList.details[rowIndex].rowspan  // 获取需要合并的行数
        return {
            rowspan: rowspan ? rowspan : 0,
            colspan: rowspan ? 1 : 0
        };

    }
}

参考

1. Table 表格 | Element Plus