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利用:row-style="rowClass"设置指定行变色
el-table表格显示selection多选时对某些复选框设置禁止选中
el-table表格实现多选功能（全选/指定选中/取消选中）
上面是“el-table合并单元格代码介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_3072.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
