const detailColumn = [
{
title: '报表名',
dataIndex: 'aa',
className: 'center',
width: '20%',
render: (text, record) => {
const obj = {
children: text,
props: {},
};
obj.props.rowSpan = record.rowSpan;
return obj;
},
},
{
title: '指标名称',
dataIndex: 'bb',
className: 'center',
width: '20%',
},...
.....
<Table
rowKey="indexCode"
dataSource={makeData(reportInfoDataDetail)} //关注 makeData
columns={columns}
bordered
pagination={false}
scroll={{ y: 300 }}
rowClassName={() => 'editable-row'}
components={components}
/>
.....
//遍历子元素,并赋值纵向合并数rowSpan
function makeData(data) {
const sortResult = sortData(data);
const dataSource = [];
sortResult.forEach((item) => {
if (item.children) {
item.children.forEach((itemOne, indexOne) => {
const myObj = itemOne;
myObj.rowSpan = indexOne === 0 ? item.span : 0;
dataSource.push(myObj);
});
}
});
return dataSource;
}
//去重并合并到children
function sortData(dataArr) {
const orgArrRe = dataArr.map(item => ({ reportName: item.reportName }));
const orgArr = uniqueObjArr(orgArrRe, 'reportName');//数组去重
for (const childOne of orgArr) { //去重reportName合并到children,得到一共有几个不同的reportName要合并
childOne.children = [];
for (const childTwo of dataArr) {
if (childOne.reportName === childTwo.reportName) { //childOne是去重的,childTwo是没去重的
childOne.children.push(childTwo);
}
}
}
for (const every of orgArr) {
every.span = every.children ? every.children.length : 0;
}
orgArr.forEach((every) => { every.span = every.children ? every.children.length : 0; });
return orgArr;
}
//对象数组去重
function uniqueObjArr(arr, fieldName) {
const result = [];
const resultArr = [];
for (const child of arr) {
if (result.indexOf(child[fieldName]) === -1) {
result.push(child[fieldName]);
resultArr.push(child);
}
}
return resultArr;
}
效果图:
### 右上角,点个赞呗!谢谢