antd合并表格相同列
antd4.x版可用
// antd表格合并列
/*
key: 键值
row:当前行
index:当前行索引
listData:表格全部数据
reactDom:要渲染的jsx
*/
export const rowSpanTable = (key, row, index, listData, reactDom) => {
let rowSpan = 1; //默认不合并
let arrIndex = 0; // 记录当前
listData.forEach((item, index) => { // 找到当前渲染行
if (item.id === row.id) {
arrIndex = index;
}
});
if (index === 0) { // 因第一行没有上一级所以单独拎出来
listData.forEach((item, index) => {
if (index > arrIndex && item[key] === row[key]) {
rowSpan += 1;
}
});
} else if (listData[arrIndex][key] === listData[arrIndex - 1][key]) { // 如歌当前的内容与上一级的内容相同则不渲染
rowSpan = 0;
} else {
listData.forEach((item, index) => {
if (index > arrIndex && item[key] === row[key]) {
rowSpan += 1;
}
});
}
return {
children: reactDom,
props: {
rowSpan,
},
};
};
用法
<Table
dataSource={labelList.tagList}
rowKey="id"
pagination={{
position: 'bottom',
pageSize: listData.pageSize,
current: listData.pageNo,
total: labelList.totalCount,
onChange: pageChange,
}}
>
<Column
title=""
align="center"
dataIndex="sort"
render={(sort, row, index) =>
rowSpanTable(
'sort',
row,
index,
labelList.tagList,
<span>{sort}</span>
)
}
/>
<Column title="key" align="center" dataIndex="id" />
</Table>
说明
数据自行模拟
必要条件就是要和并的数据必须的挨在一起才可以合并
想要那一列合并就用在那里即可
Comments | NOTHING