react antd 多级表头可折叠展开列表格table

本文介绍了如何在React中使用Table组件和ColumnGroup来创建一个可展开和折叠的一级、二级表头结构,通过change函数管理折叠/展开图标的状态并处理数据源。
摘要由CSDN通过智能技术生成
const datas = [
  {
    title: '一级表头1',
    children: [
      {
        title: '二级表头1',
        dataIndex: 'firstName',
      },
      {
        title: '二级表头2',
        dataIndex: 'lastName',
      },
    ],
    isExpand: true, // true 展开
  },
  {
    title: '一级表头2',
    children: [
      {
        title: '二级表头1',
        dataIndex: 'firstName1',
      },
      {
        title: '二级表头2',
        dataIndex: 'lastName1',
      },
    ],
    isExpand: false, // false 折叠
  },
];

// 这里做折叠、展开图标状态及数据的处理
change = (index, flag) => {
    console.log(index, flag);
}


<Table dataSource={dataSource}>
    {
       datas.map((item, index) => (
            <ColumnGroup
                title={ // title中使用reactNode自定义
                    <div>
                        {item.title}
                        {item.isExpand ? <CaretLeftOutlined onClick={() => this.change(index, item.isExpand)} /> : <CaretRightOutlined onClick={() => this.change(index, item.isExpand)} />}
                    </div>
                }
                key={index}
            >
                {
                    item.children.map((child, i) => (
                      <Column
                        title={child.title}
                        dataIndex={child.dataIndex}
                        key={child.dataIndex}
                      />
                    ))
                }
            </ColumnGroup>
        ))
    }
</Table >

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值