简单记一下使用element UI表格涉及到合并时的方法:
1. 合并行:
先对数据做处理:
dealWithData () {
const result = []
let pos = 0
const data = this.tableData
for (let i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一条记录(即索引是0的时候),向数组中加入1
result.push(1)
pos = 0
} else {
// 这里company是我的数据里用到的,如果是合并其他的字段,改为其他的就可以了
if (data[i].company === data[i - 1].company) {
// 如果useName相等就累加,并且push 0
result[pos] += 1
result.push(0)
} else {
// 不相等push 1
result.push(1)
pos = i
}
}
}
this.spanArr = result
},
然后在写渲染函数:
arraySpanMethod ({ column, rowIndex, columnIndex }) {
// 这里我是对第二列进行合并行的,可以改为其他的列
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
},
2. 如何是合并列,也跟合并行差不多,处理函数找到合并列的规则,然后渲染函数,row和col换一下就可以了