el-table合并相同数据列

el-table合并相同数据列

element-plus的文档给的合并行和列的示例都是写死的指定行或列，应用场景太小，对于下图需求完全不能满足。
![在这里插入图片描述](https://img-blog.csdnimg.cn/871380c4f02843b7b8df1cb652785b88.png

我们需要实现将表头第一行根据相同数据项进行合并列，以下是实现代码

1. el-tabel添加合并方法

<el-table :span-method="mergeCell" >el-tabel>

2. 逻辑代码

// 查找数组里有多少个相同的值
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，不执行合并
            };
          }
        }
      }