element-ui合并相同名称el-table单元格

element-ui合并相同名称el-table单元格 

• 效果图如下

• 需要用element-ui中 span-method= " " 方法

• 代码如下

• 如果数据拿到的是乱的，没有经过排序，可以将后端返回的数据进行一个排序（看自己需求），代码供上如下：

// this.arr是所有数据
this.arr.sort((a,b)=>{ 
  if(a['fxdid'] != b['fxdid']){    // fxdid需要排序的属性（字符串排序）
    return a['fxdid'].localeCompare(b['fxdid']);
  }
})

•  不排序可直接进行下面代码操作

// 合并单元格
      flitterData(arr){
        let spanOneArr = [],
        spanTwoArr = [],
        spanThreeArr = [],
        concatOne = 0,
        concatTwo = 0
        concatThree =0;
        arr.forEach((item,index)=>{
          if(index === 0){
            spanOneArr.push(1);
            spanTwoArr.push(1);
            spanThreeArr.push(1);
          }else{
            // fxdlx 是你需要合并的参数
            if(item.fxdlx === arr[index - 1].fxdlx){ //第一列需合并相同内容的判断条件 
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            }else{
              spanOneArr.push(1);
              concatOne = index;
            };
            // fxdid 是你需要合并的参数
            if(item.fxdid === arr[index - 1].fxdid&&item.fxdlx === arr[index - 1].fxdlx){//第二列需合并相同内容的判断条件
              spanTwoArr[concatTwo] += 1;
              spanTwoArr.push(0);
            }else{
              spanTwoArr.push(1);
              concatTwo = index;
            };
            if(item.fxdid === arr[index - 1].fxdid&&item.zybz === arr[index - 1].zybz){ //第三列需合并相同内容的判断条件
             spanThreeArr[concatThree] += 1;
             spanThreeArr.push(0);
            }else{
              spanThreeArr.push(1);
              tThree = index;
            };
          }
        });
        return  {
            one: spanOneArr,
            two: spanTwoArr,
            three: spanThreeArr
        }
    },
    // 合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if(columnIndex === 1 ) {
        const _row = (this.flitterData(this.arr).one)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if(columnIndex === 2) {
        const _row = (this.flitterData(this.arr).two)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if(columnIndex === 3) {
        const _row = (this.flitterData(this.arr).three)[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },