Element-ui框架：el-table表格内根据相同数据进行合并行列实现

一、页面配置

　　表格中添加:span-method="ObjectSpanMethod"绑定一个合并单元格的方法，这个方法会自动遍历所有单元格，并会带入行（row）、列（column）、行索引（rowIndex）、列索引（columnIndex）等参数用来判断和处理赋值。

　　v-if用于控制表格加载的时间节点，可以在列表查询数据并计算合并值后开启表格布局样式加载。

<el-table v-if="!show" :span-method="ObjectSpanMethod" border highlight-current-row :data="dataList" @selection-change="handleSelectionChange">
    <el-table-column label="测试字段1" align="center" prop="column1"></el-table-column>
    <el-table-column label="测试字段2" align="center" prop="column2"></el-table-column>
</el-table>

 二、方法逻辑

　　1、在查询数据列表时，对返回的结果数据进行遍历处理

　　查询数据列表调用方式：

        //获取列表
        getList() {
            //查询参数
            let data = {}
            //调用接口获取数据
            getData(data).then(res=>{
                this.list = res.list;
                //遍历处理列表数据
                this.getSpanArr(this.list);
            });
        }    

　　遍历处理方法：

      //设置单元格
      getSpanArr(list) {
        // 初始化list中每行数据的rowspan = 1,用来给行合并属性赋值
        list.forEach(item => {
          //需要合并行数（根据需要合并的字段看需要初始化几个）
          //合并行数1
          item.rowspan = 1;
          //合并行数2
          item.rowspanSecond = 1;
        });
        // 双层循环遍历进行合并所用数据的比对，累加合并行数
        for (let i = 0; i < list.length; i++) {
          for (let j = i + 1; j < list.length; j++) {
            //此处可根据相同字段进行合并
            if (list[i].columnFirst== list[j].columnFirst) {
              list[i].rowspan++;
              list[j].rowspan--;
            }
            //在第一个字段合并条件下针对第二个字段二级分组合并
            if (list[i].columnFirst == list[j].columnFirst && list[i].columnSecond == list[j].columnSecond) {
              list[i].rowspanSecond++;
              list[j].rowspanSecond--;
            }
          }
          // 这里跳过已经重复的数据(使用合并行列的最基础字段对应的合并行数)
          i = i + list[i].rowspan - 1;
        }
        //将计算结束的结果放入原用来回显表格的list
        this.list= JSON.parse(JSON.stringify(list));
      },    

　　2、根据列表计算处理后的rowspan值进行合并处理

      // 根据计算的rowspan值和行、列、索引数据来调整表格单元格的合并行列数
      ObjectSpanMethod({row, column, rowIndex, columnIndex}){
        // 第一列
        if (columnIndex === 1) {
          return {
            rowspan: row.rowspan,
            colspan: 1,
          };
        }
        if (columnIndex === 5) {
          return {
            rowspan: row.rowspanSecond,
            colspan: 1,
          };
        }
      }