vue+elementui 实现合并多个单元格

要注意的是 合并单元格时 后端返回的数据必须与表格绑定的顺序一致

vue-dom层

 	<el-table ref="report-table" :data="dataList" border v-loading="dataListLoading"
        @selection-change="handleSelectionChange" style="width: 100%;border: 1px solid #c5c5c5"
        :cell-style="{borderColor:'#c5c5c5'}" :span-method="objectSpanMethod"
        :header-cell-style="{background: '-webkit-linear-gradient(top,hsl(0deg 2% 26% / 15%),#E3EBF1,hsl(0deg 0% 100%),#D3DDE5) no-repeat',borderColor:'#B5B4B3',color:'#606266'}">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="rcCode" show-overflow-tooltip header-align="center" align="center" label="编号">
        </el-table-column>
        <el-table-column prop="manufactor" header-align="center" align="center" show-overflow-tooltip label="厂家">
        </el-table-column>
    </el-table>

// data
data() {
    return {
      dataList: [], //请求数据绑定element-ui的表格
      spanArr: [], // 第一列的数据
      spanArr1: [], // 第二列数据
      pos: 0, // 第一列数据
      pos1: 0, //第二列数据
    };

方法

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  // 判断每一列 合并数据
      if (columnIndex == 0) {
        let _row = this.spanArr[rowIndex];
        let _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex == 1) {
        let _row = this.spanArr1[rowIndex];
        let _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    getSpanArr(data) {
      // 第一列处理
      console.log(data);
      this.spanArr = [];
      if (data === null) {
        return;
      }
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
          
        } else {
          
          //第一次走else的时候：i已经是1了
          // 判断当前元素与上一个元素是否相同
          if (data[i].rcCode === data[i - 1].rcCode) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }

      // 第二列处理
      this.spanArr1 = [];
      if (data === null) {
        return;
      }
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
          
        } else {
         
          //第一次走else的时候：i已经是1了
          // 判断当前元素与上一个元素是否相同
          if (data[i].rcCode === data[i - 1].rcCode && data[i].manufactor === data[i - 1].manufactor) {

            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
      console.log(this.spanArr1,'this.spanArr');
    },

// 第三列以此类推
在请求完dataList数据之后执行方法

this.getSpanArr(this.dataList);

最后效果图

用每一列数据的每一行做对比 相同的合并 具体看需求 后端返回数据为平铺数组 找相同的元素合并
-编号
除了编号 其他都是在相同编号下进行合并

可能很拙略很冗长 记录一下