<a-table
border
:row-key="record => record.id"
:columns="columns"
:data-source="datalist"
/>
// 先声明table表头
data() {
return {
columns: [],
datalist: '' // table数据
}
}
// 在接口返回数据方法中定义此方法
this.columns = [
{
title: '希望合并表头',
align: 'center',
dataIndex: 'xxx',
key: 'xxx',
scopedSlots: { customRender: 'xxx' },
customRender: (text, record, index) => {
const obj = {
children: text !== null ? text : '',
attrs: {}
}
obj.attrs.rowSpan = this.mergeCells(text, this.datalist, 'xxx', index)
return obj
}
}
]
// 定义合并方法
methods:{
mergeCells(text, data, key, index) {
// 上一行该列数据是否一样
if (index !== 0 && text === data[index - 1][key]) {
return 0
}
let rowSpan = 1
// 判断下一行是否相等
for (let i = index + 1; i < data.length; i++) {
if (text !== data[i][key]) {
break
}
rowSpan++
}
return rowSpan
}
}
本方法,使用定义title来实现想要合并表格数据