ant design of vue 表格合并

ui框架官网：https://www.antdv.com/components/table-cn/

弄了差不多一天，哎，终于可以了；

需求：以下表格中红框部分的数据虽然一样，但因为“等级”不同，不能做合并；

 

方案：

data部分：

temp:{},//当前重复的值,支持多列

filBonusColumns:[
          {
            title: '等级',
            dataIndex: 'dengji',
            align: 'center',
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {},
              };
              obj.attrs.rowSpan = this.mergeCellKey(value, this.filBonusInfo, 'dengji','filBonusInfo');

              return obj;
            },
          },
          {
            title: '分红比例',
            dataIndex: 'bonusBili',
            align: 'center',
            customRender: (value, row, index) => {
              const obj = {
                children: value,
                attrs: {},
              };
              obj.attrs.rowSpan = this.mergeCellKey(row.dengji, this.integralBonusInfo, '','filBonusInfo','dengji');
              return obj;
            },
          },
//...................
]

 

 methods部分：

/*
    * 单元格合并
    * text 当前单元格内容
    * array 表格所有数据
    * columns 当前单元格对应的属性名
    * arrayName 为了区别 同一个页面的不同表单中有同一个属性值
    * relateColumns 若合并的单元格是根据另一列的合并情况做的合并，使用此参数
    * */
      mergeCellKey(text, array, columns, arrayName, relateColumns){
        let that = this;
        let i = 0;
// 若有依赖的单元格
        if(relateColumns){
// 'relate'用来区分“当前列”和“依赖列”
          if (text !== that.temp[arrayName + 'relate' + relateColumns]) {
            that.temp[arrayName + 'relate' + relateColumns] = text
            for(let index=0;index<array.length;index++){
// 依赖列的当前单元格数据 === 已经存储的值，则i+1
              if(array[index][relateColumns] === that.temp[arrayName + 'relate' + relateColumns]){
                i += 1;
              }
            }
          }
        }else{
          if (text !== that.temp[arrayName + columns]) {
            that.temp[arrayName + columns] = text
            for(let index=0;index<array.length;index++){
              if(array[index][columns] === that.temp[arrayName + columns]){
                i += 1;
              }
            }
          }
        }
        return i
      }

    }