首先看一下antd的Table表单组件，合并单元格，用到了rowSpan(合并行)和colSpan(合并列)
后台返回的数据
[
{
key: 0,
category: '水果',
name: '桃子',
desc: '好吃',
},
{
key: 1,
category: '水果',
name: '梨子',
desc: '真好吃',
},
{
key: 2,
category: '蔬菜',
name: '茄子',
desc: '真好吃',
},
{
key: 9,
category: '蔬菜',
name: '茄子',
desc: '真好吃',
},
{
key: 3,
category: '家禽',
name: '牛肉',
desc: '太好吃了',
},
{
key: 4,
category: '家禽',
name: '羊肉',
desc: '真不错',
},
{
key: 5,
category: '家禽',
name: '猪肉',
desc: '吃不起，太贵',
},
{
key: 4,
category: '家禽',
name: '羊肉',
desc: '真不错',
},
{
key: 5,
category: '家禽',
name: '猪肉',
desc: '吃不起，太贵',
},
]我们希望把category的值相同的，行合并成一个单元格
类似于这种
rowSpan这个属性可以指定合并行。例如说第一行，指定rowSpan为3，意思就是合并三行，则后面紧挨的两行的rowSpan就需要设置为0。因为他们一共就占有3份，第一行的为3份，已经占完了，下面俩就不能再占了，就必须为0
官网实例中，使用onCell属性，来指定合并多少行/列，onCell的值是一个函数，默认接收2个参数，第一个参数是当前行数据，第二个参数就是这行的索引
我在网上看了一些大佬的做法，感觉直接处理源数据，在源数据中添加它这个所占的份数，直接通过在onCell中指定他所需要合并的行的个数，这种做法最简单
也就是把源数据处理成这种 文章来源：https://www.toymoban.com/news/detail-524688.html
[
{
key: 0,
category: '水果',
name: '桃子',
desc: '好吃',
rowSpan: 2,
},
{
key: 1,
category: '水果',
name: '梨子',
desc: '真好吃',
rowSpan: 0,
},
{
key: 2,
category: '蔬菜',
name: '茄子',
desc: '真好吃',
rowSpan: 2,
},
{
key: 9,
category: '蔬菜',
name: '茄子',
desc: '真好吃',
rowSpan: 0,
},
{
key: 3,
category: '家禽',
name: '牛肉',
desc: '太好吃了',
rowSpan: 3,
},
{
key: 4,
category: '家禽',
name: '羊肉',
desc: '真不错',
rowSpan: 0,
},
{
key: 5,
category: '家禽',
name: '猪肉',
desc: '吃不起，太贵',
rowSpan: 0,
},
{
key: 4,
category: '家禽',
name: '羊肉',
desc: '真不错',
rowSpan: 0,
},
{
key: 5,
category: '家禽',
name: '猪肉',
desc: '吃不起，太贵',
rowSpan: 0,
},
]具体代码如下文章来源地址https://www.toymoban.com/news/detail-524688.html
import { Table } from 'antd'
const Demo1 = () => {
let field = 'category'
const data = [
{
key: 0,
category: '水果',
name: '桃子',
desc: '好吃',
// rowSpan: 2,
},
{
key: 1,
category: '水果',
name: '梨子',
desc: '真好吃',
// rowSpan: 0,
},
{
key: 2,
category: '蔬菜',
name: '茄子',
desc: '真好吃',
// rowSpan: 2,
},
{
key: 9,
category: '蔬菜',
name: '茄子',
desc: '真好吃',
// rowSpan: 0,
},
{
key: 3,
category: '家禽',
name: '牛肉',
desc: '太好吃了',
// rowSpan: 3,
},
{
key: 4,
category: '家禽',
name: '羊肉',
desc: '真不错',
// rowSpan: 0,
},
{
key: 5,
category: '家禽',
name: '猪肉',
desc: '吃不起，太贵',
// rowSpan: 0,
},
{
key: 4,
category: '家禽',
name: '羊肉',
desc: '真不错',
// rowSpan: 0,
},
{
key: 5,
category: '家禽',
name: '猪肉',
desc: '吃不起，太贵',
// rowSpan: 0,
},
]
const columns = [
{
title: '姓名',
dataIndex: 'category',
onCell: (record, index) => {
// console.log(record.category, record.rowSpan)
return { rowSpan: record.rowSpan }
},
},
{
title: '床位',
// colSpan: 2, // 设置占位2格
dataIndex: 'parentType',
/**
* 每4行都是一个日期，从index = 0 开始，
* 每隔4行的rowSpan为4，其余的rowSpan为0
*/
// onCell: (_, index) => ({
// rowSpan: index % 2 === 0 || index === 0 ? 2 : 0,
// }),
},
{
title: '组',
// colSpan: 0, // 设置占位0格
dataIndex: 'type',
},
{
title: '药房',
dataIndex: 'user1',
},
{
title: '类型',
dataIndex: 'user2',
},
{
title: '项目名称',
dataIndex: 'user3',
},
{
title: '规格',
dataIndex: 'user4',
},
]
const changeData = (data, field) => {
let count = 0 //重复项的第一项
let indexCount = 1 //下一项
while (indexCount < data.length) {
var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
if (!item.rowSpan) {
item.rowSpan = 1 //初始化为1
}
if (item[field] === data[indexCount][field]) {
//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
item.rowSpan++
data[indexCount].rowSpan = 0
} else {
count = indexCount
}
indexCount++
}
}
changeData(data, field) //处理数据
return (
<div>
<Table
columns={columns}
dataSource={data}
pagination={false}
bordered
></Table>
</div>
)
}
export default Demo1到了这里，关于react结合antd的Table组件实现动态单元格合并的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
