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