element-ui el-table 如何实现合并单元格

el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。

比如:代码中定义:span-method="objectSpanMethod"

 
          
          
          
          
          
          
          
          
          
            
          
          
            
          
        

objectSpanMethod实现是在方法区,具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删除,展示的话是展示几行一列。

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row && columnIndex == 0 && column.label === "广告位showid") {
        if (this.rowSpanList && this.rowSpanList[rowIndex]) {
          let rowSpan = this.rowSpanList[rowIndex];
          return [rowSpan, 1];
          // 相同id有几个就绘制成几行一列
        } else {
          return [0, 0];
          // 重复的id值,已经绘制过,不需要在展示id了,删除掉改单元格的绘制
        }
      }
    },

 { row, column, rowIndex, columnIndex }四个参数表示row行数据,column列数据,rowIndex行标,columnIndex列标

rowSpanList是记录id分布的, 是在展示数据获取及处理时计算生成的,大致逻辑是

若当前id与列表中上一个数据的id相同:

 if ( this.info.sids[i].id ===this.info.sids[i - 1].id) 

该相同id的起始位置标记是position

相同的话计数rowSpanList加1:this.rowSpanList[position] += 1

              this.rowSpanList = [];
              var position = 0;
              for (var i in this.info.sids) {
                if (i === "0") {
                  position = 0;
                  this.rowSpanList.push(1);
                } else {
                  if (
                    this.info.sids[i].id ===
                    this.info.sids[i - 1].id
                  ) {
                    this.rowSpanList[position] += 1; //项目名称相同,合并到同一个数组中
                    this.rowSpanList.push(0);
                  } else {
                    this.rowSpanList.push(1);
                    position = i;
                  }
                }

最后this.rowSpanList可能值是[2,0,3,0,0,1]

数字2表示有两个一样的,在table渲染中表示该单元格需要占位2行1列。

0表示跟上一个id一样,不需要标记,在table渲染中表示该单元格需要删除。

你可能感兴趣的:(ui,vue.js,elementui)