e-table，表格单元格合并

表格合并，根据表格第一列***名称相同，则进行单元格的合并。变化情况分析（前/后）单元格也同样要合并，其合并依据的是表格第一列***名称相同。

查找官网，表格合并方法：

https://element.eleme.io/#/zh-CN/component/table

首先第一步：给我们的表格添加一个方法

 :span-method="spanMethod"

 "tableData" ref="tableDataAgain" class="my-new-table" border height="390"
                    :span-method="spanMethod">

spanMethod函数接收4个参数，分别是row, column, rowIndex, columnIndex，感兴趣的小伙伴可自行打印来看看是什么样子的。

  spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 4 || columnIndex === 5 ||columnIndex === 6 || columnIndex === 7) {
        return this.mergeCol("depId", rowIndex);
      }
    },

这里面我们对表格columnIndex进行一个判断，第一列的第一个表格则是columnIndex为0，以此类推，所以变化情况分析（前/后）单元格数格子过来，他们则是4，5，6，7.

当单元数为这些格子的时候，我们进行一个return 返回，调用函数mergeCol，并传两个参数进行，这里的depId是业务需要，传递一个id 和索引行进去。

mergeCol方法里面，对行号进行一个判断，有写注释，供大家学习参考。

  mergeCol(id, rowIndex) {
      // 合并单元格
      // id：属性名
      // rowIndex：行索引值
      var idName = this.tableData[rowIndex][id]; // 获取当前单元格的值
      if (rowIndex > 0) {
        // 判断是不是第一行
        if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) {
          // 先判断当前单元格的值是不是和上一行的值相等
          var i = rowIndex;
          var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
          while (i < this.tableData.length) {
            // 当索引值小于table的数组长度时，循环执行
            if (this.tableData[i][id] === idName) {
              // 判断循环的单元格的值是不是和当前行的值相等
              i++; // 如果相等，则索引值加1
              num++; // 合并的num计数加1
            } else {
              i = this.tableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环
            }
          }
          return {
            rowspan: num, // 最终将合并的行数返回
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0, // 如果相等，则将rowspan设置为0
            colspan: 1,
          };
        }
      } else {
        // 如果是第一行，则直接返回
        let i = rowIndex;
        let num = 0;
        while (i < this.tableData.length) {
          // 当索引值小于table的数组长度时，循环执行
          if (this.tableData[i][id] === idName) {
            i++;
            num++;
          } else {
            i = this.tableData.length;
          }
        }
        return {
          rowspan: num,
          colspan: 1,
        };
      }
    },