element-ui table 配合后台动态合并单元格 (span-method)

element-ui table 配合后台动态合并单元格 (span-method)

objectSpanMethod({row, column, rowIndex, columnIndex}) {
        let me = this;
        let data;
        // console.log(row, column, rowIndex, columnIndex);
        if(me.DataManager.MergeRanks && me.DataManager.MergeRanks.length){
          for (let index = 0; index < me.DataManager.MergeRanks.length; index++) {
            let item = me.DataManager.MergeRanks[index];
            for (let key in item) {
              if (key == column.property && item.rowIndex <= rowIndex) {
                item[key].rowIndex = item.rowIndex;
                item[key].columnIndex = columnIndex;
                item[key].key = key;
                me.Merge = item[key];
                if (item.rowIndex == rowIndex) {
                  return {
                    rowspan: item[key].rowspan,
                    colspan: item[key].colspan
                  };
                }
              }
            }
          }

          // 合并
          if (((columnIndex >= me.Merge.columnIndex) && (columnIndex < (me.Merge.columnIndex + me.Merge.colspan))) &&
            ((me.Merge.rowIndex == rowIndex) || ((rowIndex >= me.Merge.rowIndex) && (rowIndex < (me.Merge.rowIndex + me.Merge.rowspan))))) {
            data = {
              rowspan: 0,
              colspan: 0
            };
          }
        }

        // console.log(row, column, rowIndex, columnIndex, data, me.Merge);
        return data
      },

后台返回json

MergeRanks: [{
          rowIndex: 0,
          GP: {
            rowspan: 2,
            colspan: 2,
          },
          HBBCR: {
            rowspan: 2,
            colspan: 2,
          }
        }, {
          rowIndex: 2,
          GP: {
            rowspan: 3,
            colspan: 3,
          },
          HBBCR: {
            rowspan: 3,
            colspan: 3,
          }
        }]

你可能感兴趣的:(element-ui table 配合后台动态合并单元格 (span-method))