antd table merge rows or columns (dynamically add merged rows and columns)
The header only supports column merging, which is set using colSpan in the column.
The table supports row/column merging. When the cell attribute colSpan or rowSpan in render is set to 0, the set table will not be rendered.
data:
dataTableData = [
{
key: "0",
"category": "水果",
"name": "桃子",
"desc": "好吃"
}, {
key: "1",
"category": "水果",
"name": "茄子",
"desc": "好吃"
}, {
key: "3",
"category": "家禽",
"name": "牛肉",
"desc": "好吃"
}, {
key: "4",
"category": "家禽",
"name": "牛肉",
"desc": "好吃到停不下来"
}, {
key: "5",
"category": "家禽",
"name": "猪肉",
"desc": "吃不起，太贵"
}
]
Column properties:
const columnsData = [
{
title: '分类',
dataIndex: 'category',
width:"30%",
render: (value, row, index) => {
const obj = {
children: value,
props: {
},
};
obj.props.rowSpan = row.categoryrowSpan;
return obj;
}
},
{
title: '名称',
dataIndex: 'name',
width:"30%",
render: (value, row, index) => {
const obj = {
children: value,
props: {
},
};
obj.props.rowSpan = row.namerowSpan;
return obj;
}
},
{
title: '评价',
dataIndex: 'desc',
render: (value, row, index) => {
const obj = {
children: value,
props: {
},
};
obj.props.rowSpan = row.descrowSpan;
return obj;
}
},
];
Process the data:
// rowSpan 合并列
// colSpan 合并行
export const changeData = (data, field) => {
let count = 0;//重复项的第一项
let indexCount = 1;//下一项
while (indexCount < data.length) {
var item = data.slice(count, count + 1)[0];//获取没有比较的第一个对象
if (!item[`${
field}rowSpan`]) {
item[`${
field}rowSpan`] = 1;//初始化为1
}
if (item[field] === data[indexCount][field]) {
//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
item[`${
field}rowSpan`]++;
data[indexCount][`${
field}rowSpan`] = 0;
} else {
count = indexCount;
}
indexCount++;
}
return data
}
/**
*
* @param {*} data 数据源
* @param {*} field 合并标识
* @param {*} referenceList []数组 第一项为合并参照 后面的以第一项为参照
* @param {*} reference2 除了referenceList中的项，其他都按照 reference2参照
*/
export const changeData2 = (data, field, referenceList, reference2) => {
let count = 0;//重复项的第一项
let indexCount = 1;//下一项
while (indexCount < data.length) {
var item = data.slice(count, count + 1)[0];//获取没有比较的第一个对象
if (!item[`${
field}rowSpan`]) {
item[`${
field}rowSpan`] = 1;//初始化为1
}
if (referenceList.includes(field) ) {
if (item[field] === data[indexCount][field] && item[referenceList[0]] === data[indexCount][referenceList[0]]) {
//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
item[`${
field}rowSpan`]++;
data[indexCount][`${
field}rowSpan`] = 0;
} else {
count = indexCount;
}
} else {
if (item[field] === data[indexCount][field] && item[reference2] === data[indexCount][reference2] && item[referenceList[0]] === data[indexCount][referenceList[0]]) {
//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
item[`${
field}rowSpan`]++;
data[indexCount][`${
field}rowSpan`] = 0;
} else {
count = indexCount;
}
}
indexCount++;
}
return data
}
Transform the data in data:
let propsList = ['category', 'name', 'desc']
propsList.map(item => {
dataTableData = changeData(dataTableData, item)
})
page:
<Table columns={
columnsData} dataSource={
dataTableData} bordered />
Reference:
https://blog.csdn.net/weixin_44135121/article/details/108277720