el-table合并相同数据列
element-plus的文档给的合并行和列的示例都是写死的指定行或列,应用场景太小,对于下图需求完全不能满足。
![在这里插入图片描述](https://img-blog.csdnimg.cn/871380c4f02843b7b8df1cb652785b88.png
我们需要实现将表头第一行根据相同数据项进行合并列,以下是实现代码
el-tabel
添加合并方法
<el-table :span-method="mergeCell" ></el-tabel>
- 逻辑代码
// 查找数组里有多少个相同的值
const getSameNum = (val, arr) => {
const processArr = arr.filter(item => {
return item == val;
})
return processArr.length;
}
// 合并第一行相同数据列方法
const mergeCell = ({ row, rowIndex, columnIndex }) => {
// 指定第一行表头
if (rowIndex === 0) {
if (columnIndex < row.length - 1 && row[columnIndex] === row[columnIndex + 1]) {
// 如果之前已经对第一个相同项处理了,则不用合并返回[0,0]
if (columnIndex > row.indexOf(row[columnIndex])) return [0, 0]
// 遇到没处理过的第一个相同项,则找它有多少个同类数量进行合并
const num = getSameNum(row[columnIndex], row);
return [1, num];
}
if (columnIndex > 0 && row[columnIndex] === row[columnIndex - 1]) {
return [0, 0];
}
}
return [1, 1]; // 默认情况下返回 [1, 1] 表示不进行合并
}
补充: mergeCell
方法参数解构出四个属性,分别是row(当前行), column(当前列), rowIndex(当前行号,从0开始), columnIndex(当前列号,从0开始)
mergeCell
返回一个描述合并单元格的对象或数组,如果是对象,那么对象的rowspan代表要合并的行数,colspan代表要合并的列数;如果是数组,那么数组第一个元素代表要合并的行数,数组第二个元素代表要合并的列数
而且千万千万千万要注意的是,单元格的合并,是从起始位置合并的,而不是从末尾位置合并,意思就是,比如你想要合并3到6行且是第一列的单元格,那应该从第三行第一列开始合并,按照如下代码进行设置
mergeCell ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 先判断是不是第一列,只有第一列才执行合并
if (rowIndex === 2) { // 先判断是不是第三行,只有第三行才执行合并
return {
rowspan: 3, // 从起始位置,即第三行开始,执行合并3行
colspan: 1, // 从起始位置,即第一列开始,执行合并1列
};
} else {
return { // 第一列的其他元素不执行合并
rowspan: 0, // 为0,不执行合并
colspan: 0 // 为0,不执行合并
};
}
}
}