When working on a management system before, there was a need to merge the cells in the first column (merge if the names are the same). At the beginning, I wrote a lot of code. After optimization, the code was simplified by about 100 lines, so I thought about it Summarize the optimization process.
<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>
You can see that this method of merging cells has many lines of code, but we can summarize the rules and optimize the code to achieve the purpose of streamlining the code.
The simplified code is as follows (mainly the spanMethod method)
// 合并单元格规则
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,
};
};
You can see that the code has been simplified a lot.