vue element复杂表格动态合并

表格合并分为行合并和列合并


element表格配置方法span-method

:span-method="arraySpanMethod"
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//逻辑部分
}

1）行合并（值相同的合并）

// 合并行
const _row = this.rowObj[name][rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
      rowspan: _row,
      colspan: _col,
};
//通过方法rowspan设置rowObj的值
rowspan(){
 //每次调用清空数据
 this.rowObj = {};
 this.positionObj = {};
 this.columns.forEach((value, i) => {
     this.rowObj[value] = [];
     this.positionObj[value] = 0;
     this.tableDatas.forEach((item, index) => {
         if (index === 0) {
             this.rowObj[value].push(1);
             this.positionObj[value] = 0;
         } else {
             if (
               this.tableDatas[index][value] ===
               this.tableDatas[index - 1][value]
             ) {
               this.rowObj[value][this.positionObj[value]] += 1;
               this.rowObj[value].push(0);
             } else {
               this.rowObj[value].push(1);
               this.positionObj[value] = index;
             }
        }
     });
  });
}

2）列合并（空值位置将被后面的内容区域合并）

// 列合并
let _columnIndex;
let status1 = false; //逻辑联结词
let status2 = false; //param_TYPE
let name = column.property;
this.columns.forEach((cur, index) => {
   if (!row[cur] && name == cur) {
       status1 = true;
   } else if (!row[cur] && name == "param_TYPE") {
      status2 = true;
      _columnIndex = this.getCol(row, columnIndex);
   }
 });
 if (status1) {
     return {
          rowspan: 0,
          colspan: 0,
     };
 } else if (status2) {
     return {
         rowspan: 1,
         colspan: _columnIndex,
     };
 }