antd table合并行或者列(动态添加合并行、列)
数据:
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": "吃不起,太贵"
}
]
列属性:
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;
}
},
];
对数据进行处理:
// 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
}
对data中的数据进行改造:
let propsList = ['category', 'name', 'desc']
propsList.map(item => {
dataTableData = changeData(dataTableData, item)
})
页面:
<Table columns={columnsData} dataSource={dataTableData} bordered />
参考:
https://blog.csdn.net/weixin_44135121/article/details/108277720