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
      }

    }