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

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

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合并行的通用方法（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

el-table表格显示selection多选时对某些复选框设置禁止选中

el-table表格实现多选功能（全选/指定选中/取消选中）

el-table实现拖拽行排序sortablejs

标签： el-table, 单元格合并

上面是“el-table合并单元格代码介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3072.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！