PC端el-table合并单元格总结

之前做管理系统的时候有这样一个需求，那就是合并首列的单元格（如果名字相同就合并），刚开始代码写的很多，经过优化之后，代码精简了大约100多行，所以就想着把这次优化的过程总结一下。

<template>
                <el-table
                            :data="content"
                            :span-method="
                                (param) =>
                                    spanMethod(
                                        param,
                                        content,
                                        cateName
                                    )
                            "
                            @row-click="handle"
                        >
                        ...
                  </el-table>
</template>
<script setup>      
// 合并单元格规则
const spanMethod = (
    { row, column, rowIndex, columnIndex },
    data,
    cateName
) => {
    let subTypes = [];
    data.forEach((item) => {
        if (!subTypes.includes(item.subName)) {
            subTypes.push(item.subName);
        }
    });
    if (cateName != "资料") {
        return;
    }
    let tablelength1 = subTypes[0]
        ? data.filter((item) => item.subName === subTypes[0])
              .length
        : 0;

    let tablelength2 = subTypes[1]
        ? data.filter((item) => item.subName === subTypes[1])
              .length
        : 0;
    let tablelength3 = subTypes[2]
        ? data.filter((item) => item.subName === subTypes[2])
              .length
        : 0;
    let tablelength4 = subTypes[3]
        ? data.filter((item) => item.subName === subTypes[3])
              .length
        : 0;
    let tablelength5 = subTypes[4]
        ? data.filter((item) => item.subName === subTypes[4])
              .length
        : 0;
    let tablelength6 = subTypes[5]
        ? data.filter((item) => item.subName === subTypes[5])
              .length
        : 0;
    let tablelength7 = subTypes[6]
        ? data.filter((item) => item.subName === subTypes[6])
              .length
        : 0;

    if (columnIndex === 0) {
        if (rowIndex === 0) {
            return {
                rowspan: tablelength1,
                colspan: 1,
            };
        }
        if (rowIndex === tablelength1) {
            return {
                rowspan: tablelength2,
                colspan: 1,
            };
        }
        if (rowIndex === tablelength1 + tablelength2) {
            return {
                rowspan: tablelength3,
                colspan: 1,
            };
        }
        if (rowIndex === tablelength1 + tablelength2 + tablelength3) {
            return {
                rowspan: tablelength4,
                colspan: 1,
            };
        }
        if (
            rowIndex ===
            tablelength1 + tablelength2 + tablelength3 + tablelength4
        ) {
            return {
                rowspan: tablelength5,
                colspan: 1,
            };
        }
        if (
            rowIndex ===
            tablelength1 +
                tablelength2 +
                tablelength3 +
                tablelength4 +
                tablelength5
        ) {
            return {
                rowspan: tablelength6,
                colspan: 1,
            };
        }
        if (
            rowIndex ===
            tablelength1 +
                tablelength2 +
                tablelength3 +
                tablelength4 +
                tablelength5 +
                tablelength6
        ) {
            return {
                rowspan: tablelength7,
                colspan: 1,
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0,
            };
        }
    }
};
</script>

可以看到这个合并单元格的方法有很多行代码，但是我们可以总结一下规律并优化一下代码，达到精简代码的目的。

精简后的代码如下（主要是spanMethod这个方法）

// 合并单元格规则
const spanMethod = (
    { row, column, rowIndex, columnIndex },
    data,
    cateName
) => {
    if (cateName != "资料" || columnIndex !== 0) {
        return;
    }
    let subTypes = []; //存放资料类型
    let subTypesLength = []; // 存放资料类型对应的数据数组长度
    let subRows = []; //存放起始合并行以及合并行数

    // 资料小类
    tableData.forEach((item) => {
        if (!subCTypes.includes(item.subName)) {
            subTypes.push(item.subName);
        }
    });
    // 存放资料的数据数组长度
    subTypes.forEach((subName) => {
        subTypesLength.push(
            data.filter((item) => item.subName === subName).length
        );
    });
    // 存放起始合并行以及合并行数
    subTypesLength.reduce((prev, cur, index) => {
        subRows.push({ rowIndex: prev, rowspan: cur });
        return prev + cur;
    }, 0);

    let subspan = 0;

    for (var i = 0; i < subRows.length; i++) {
        if (subRows[i].rowIndex == rowIndex) {
            subspan = subRows[i].rowspan;
            break;
        }
    }
    return {
        rowspan: subspan,
        colspan: subspan == 0 ? 0 : 1,
    };
};

可以看到代码精简了很多，