关于el-table列的单元格合并
一、el-table里面的单元格合并
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%"
></el-table>
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
const currentYear = row['targetYear'];
let rowspan = 1;
if (rowIndex === 0 || data.value[rowIndex]['targetYear'] !== currentYear) {
for (let i = rowIndex + 1; i < data.value.length; i++) {
if (data.value[i]['targetYear'] === currentYear) {
rowspan++;
} else {
break;
}
}
return {
rowspan: rowspan,
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
}else if(columnIndex === 1) {
const currentType = row['targetType'];
let rowspan = 1;
if(rowIndex === 0 || data.value[rowIndex-1]['targetType'] !== currentType){
for (let i = rowIndex + 1; i < data.value.length; i++) {
if (data.value[i]['targetType'] === currentType) {
rowspan++;
} else {
break;
}
}
return {
rowspan: rowspan,
colspan: 1,
}
}else {
return {
rowspan: 0,
colspan: 0,
}
}
}else if(columnIndex >1 &&columnIndex<6 ){
const currentDept = row['deptName'];
let rowspan = 1;
if(rowIndex === 0 || data.value[rowIndex-1]['deptName'] !== currentDept){
for (let i = rowIndex + 1; i < data.value.length; i++) {
if (data.value[i]['deptName'] === currentDept) {
rowspan++;
} else {
break;
}
}
return {
rowspan: rowspan,
colspan: 1,
}
}else {
return {
rowspan: 0,
colspan: 0,
}
}
}
};
二、效果
三、出现问题
上面代码出现问题,因为是按列合并的,第二列和第一列之间没有关系,导致第二列里面只有1,中间没有其他类型间隔的话,2023和2024的1,会合并在一起,没有因为属于不同的年份而进行分隔
优化代码
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
//第一列合并
if (columnIndex === 0) {
let tableArr = [] //创建一个空数组,用于存储每一行的合并信息
let pos = 0 //初始化一个位置变量,用于记录当前需要合并的行位置
for (let i = 0; i < data.value.length; i++) {
if (i === 0) {
tableArr.push(1) // // 数组第一个元素为1,表示第一行至少有1个单元格
pos = 0 // 设置当前位置为0
} else {
// 开始遍历 判断当前元素与上一个元素是否相同
if (
data.value[i].targetYear ===
data.value[i - 1].targetYear
) {
tableArr[pos] += 1 // 如果相同,则增加要合并的行数
tableArr.push(0) // 在数组中添加一个0,表示当前行不显示单元格
} else {
tableArr.push(1) // 如果不同,则在新的一行开始,添加一个1
pos = i // 更新当前位置为当前行索引
}
}
}
}
这里只放了第一列的合并代码,其他列和第一列一样,只在内部的if判断里面进行区分
// 开始遍历 判断当前元素与上一个元素是否相同
if (
data.value[i].targetYear ===
data.value[i - 1].targetYear &&
data.value[i].itemType ===
data.value[i - 1].itemType
)