element ui 表格 合并单元格?

Posted javascript9527

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element ui 表格 合并单元格?相关的知识,希望对你有一定的参考价值。

 

    问题: 将表格中 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
          }
        }
      }
    },

 

   

 

 

     

以上是关于element ui 表格 合并单元格?的主要内容,如果未能解决你的问题,请参考以下文章

Element-ui 表格 (Table) 组件中动态合并单元格

element.ui合并单元格

element-ui中table函数合并单元格

elementui动态合并单元格(亲测好用)

如何在 Element UI 表格中显示嵌套单元格?

由element-ui的table引发的系列问题---单元格合并