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 } }
原文地址:https://www.cnblogs.com/duanzhenzhen/p/14451100.html