elementui table组件合并行

1.需求和效果

今天遇到了个动态获取表格数据后还要对行进行合并，拿到的数据大致是这样的

      tableData: [
        {
          id: "1",
          name: "王小虎",
          amount1: "234"
        },
        {
          id: "1",
          name: "王小虎",
          amount1: "165"
        },
        {
          id: "2",
          name: "王小",
          amount1: "324"
        },
        {
          id: "2",
          name: "王小",
          amount1: "621"
        },
        {
          id: "2",
          name: "王小",
          amount1: "539"
        }
      ]

需要实现的效果是：

根据自己的需求进行合并

2.过渡期

想搞懂span-method方法，先看下面的代码

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {    //用于设置要合并的列
          if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
              rowspan: 2,　　　　　//合并的行数
              colspan: 1          //合并的列数，设为０则直接不显示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

自己用个数据测试下，你就懂了columnIndex，rowIndex ，rowspan，colspan的意思了

3.代码实现

 <el-table
            :data="deptTableData"
            border
            v-loading="loading"
            :span-method="objectSpanMethod"  //合并行的方法
          >
  ......
          </el-table>
  //js,需要注意的是获取的数据需要先处理下，例如我下面这个
  //异步方法获取数据后
  ({   ...
        this.deptTableData = res.data; 
            }).then(() =>{
          this.getSpanArr(this.deptTableData)
}),
    getSpanArr(data) {
      // data就是我们从后台拿到的表格数据
      this.spanArr = []   //需要在data中定义 spanArr:[]
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].configName === data[i - 1].configName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
     //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
    },