1、先把请求返回的数据实现平铺;
2、通过colSpan/rowSpan属性实现 表格行/列合并
请求返回的数据三维数组:
一、首先将多维数组转换成一维数组:
responseData.map((responseDataItem,index2,) => {
let type = true
const len1 = responseDataItem.indicatorResultList.length
responseDataItem.indicatorResultList.map((timeDataItem) => {
const len2 = timeDataItem.scoreList.length
timeDataItem.scoreList.map((scoreListItem, index) => {
arr = [
...arr,
{
zhibiao: timeDataItem.title,
description: timeDataItem.description,
standard: timeDataItem.standard,
title: `${responseDataItem.title}(${responseDataItem.weight}%)`,
weight: `${timeDataItem.weight}%`,
name: scoreListItem.employee.name,
score: scoreListItem.score,
comment: scoreListItem.comment,
totalScore: timeDataItem.totalScore,
id: responseDataItem.id,
titleSpan: Number(`${ type ? len2*len1 : 0}`),
twoSpan:index === 0 ? len2 : 0,
},
]
type = false
return arr
})
})
})
this.data = arr
转换的数据格式:(一维数组)
二、通过antD合并的属性rowSpan设置:
this.columns = [
{
title: '维度',
dataIndex: 'title',
width: 100,
customRender(_, row) {
return {
children: row.title,
attrs: {
rowSpan: row.titleSpan,
},
}
},
},
{
title: '绩效评分',
children: [
{
title: '评分人',
dataIndex: 'name',
width: 200,
customRender: renderContent,
},
{
title: '评分',
dataIndex: 'score',
customRender: renderContent,
},
{
title: '评语',
dataIndex: 'comment',
customRender: renderContent,
width: 200,
},
],
},
]
最终实现效果: