前端合并单元格，一看就会

使用vue+elementui展示 合并行

• 效果图

 

表格渲染
:span-method="objectSpanMethod" 是合并行或列的计算方法，写在el-table标签上

<el-table v-loading="loading" :data="data" size="small" :span-method="objectSpanMethod">
  <el-table-column align="center" prop="lksName" label="湖泊名称"></el-table-column>
  <el-table-column align="center" prop="adName" label="行政区划" width="200px" class="names"></el-table-column>
</el-table>



monSpanArr(){
      var that = this;
      var arr = new Array();
      if (this.data) {
        this.data.forEach((item, index) => {
          if (index == 0) { //因为是第一条数据，无论怎样最少会占一行，所以先给数组arr[0] = 1
            arr.push(1);
            that.position = 0; //position作为数组下标
          } else {
            if (this.data[index].lksName == this.data[index - 1].lksName) { //如果判断数据相同
              arr[that.position] += 1; //数组和上一条相同的数据+1 ，比如arr[0] +=1
              arr.push(0); //当前条数下标的数组push 0 进去，在效果图上就展现出合并状态，不再单独占一行，比如arr[1] = 0
            } else { //如果判断数据不相同
              arr.push(1); //数组push 1 进去，在效果图上就展现单独占一行的状态
              that.position = index; //更新下标
            }
          }
        });
        this.monSpanArrs = arr //this.monSpanArrs在objectSpanMethod中使用
      }
    },


 objectSpanMethod({ row, column, rowIndex, columnIndex }){//行，列，行号，列号 
       if (columnIndex === 0) {//判断第一列，此处是湖泊名称 
          const _row = this.monSpanArrs[rowIndex];//this.monSpanArr[行号作为下标]，拿到当前行号需要合并的行数
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,//返回合并的行数
            colspan: _col 
          };
      }
    },