element ui 表格 合并单元格？

Posted 2020-11-27 javascript9527

 

    问题： 将表格中 id相同的数据，某一列合并？

    :span-method="objectSpanMethod"  // talbe 中加入的方法， :span-method是element 进行表单合并的钩子函数。

 

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {//行 ， 列 ， 行号 ， 列号
      if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 ) {
        const sameRoutIdList = this.planekingList.filter(i =>  //过滤出id相同的数据
          i.planUnitId === row.planUnitId
        )
        const spanLength = sameRoutIdList.length     //统计 id相同数据的长度
        const firstIndex = this.planekingList.findIndex(i =>  //找打id相同数据的第一个下标
          i.planUnitId === row.planUnitId
        )
        if (spanLength > 1) {  //如果长度大于 1 
          if (rowIndex === firstIndex) {  
            return {
              rowspan: spanLength,//合并的行数
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }
    },