之前做管理系统的时候有这样一个需求，那就是合并首列的单元格（如果名字相同就合并），刚开始代码写的很多，经过优化之后，代码精简了大约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,};
};

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