- 在需要进行合并单元格的列配置中,增加如下内容:
rowSpan属性为该单元格所要占的行数,rowSpan的取值,使用行的【key+‘Span’】值,该值将在后面提供的函数中进行计算,如果有多列需要合并,按样式增加customRender 属性即可。
{
title: '分类',
dataIndex: 'category',
key: 'category',
customRender: (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
obj.attrs.rowSpan = row.categorySpan
return obj
}
}
2.单元格合并函数(主要用于计算rowSpan的值)
// 需要计算合并的数据,需要合并的列key(数组,支持多个key)
mergeCell (data, keys) {
let tempValue = ''
for (let kIndex = 0; kIndex < keys.length; kIndex++) {
const key = keys[kIndex]
const spanKey = key + 'Span'
for (let i = 0; i < data.length;) {
var rowSpan = 0
if (tempValue[key] !== data[i][key]) {
tempValue = data[i][key]
for (let j = i; j < data.length; j++) {
const item = data[j]
if (item[key] === tempValue) {
rowSpan += 1
} else {
break
}
}
}
data[i][spanKey] = rowSpan
for (let j = i + 1; j < i + rowSpan && j < data.length; j++) {
data[j][spanKey] = 0
}
i += rowSpan
}
}
// this.bmkResult = data
}
3.在数据获取成功后,调用该函数即可:
getResult(this.id).then(res => {
if (res.code === 0) {
this.tableData = res.data
// 引用类型调用,不需要返回重新赋值
this.mergeCell(this.tableData, ['category', 'target'])
}
}