el-table合并单元格代码介绍

vuejs结合el-table开发列表，如何动态合并列单元格。下面编程教程网小编给大家简单介绍一下实现代码！

1、先在el-table代码中新增如下代码：

:span-method="spanMethod"

2、合并单元格代码（直接复制不需要改动）

mergeCol(id, rowIndex) {
 //this.listData表格数据
 var idName = this.listData[rowIndex][id]
 if (rowIndex > 0) {
   if (this.listData[rowIndex][id] != this.listData[rowIndex - 1][id]) {
       var i = rowIndex
       var num = 0
       while (i < this.listData.length) {
         if (this.listData[i][id] === idName) {
           i++
           num++
         } else {
           i = this.listData.length
         }
       }
       return {
         rowspan: num,
         colspan: 1
       }
    } else {
       return {
           rowspan: 0,
           colspan: 1
       }
    }
  } else {
     let i = rowIndex
     let num = 0
     while (i < this.listData.length) {
       if (this.listData[i][id] === idName) {
           i++
           num++
       } else {
           i = this.listData.length
       }
     }
     return {
       rowspan: num,
       colspan: 1
     }
  }
},

3、根据需要修改合并参数

 spanMethod({ row, column, rowIndex, columnIndex }) {
  switch (columnIndex) {
    case 0:
      return this.mergeCol('name', rowIndex)
    case 1:
      return this.mergeCol('school', rowIndex)
  }
}

以上是编程学习网小编为您介绍的“el-table合并单元格代码介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。