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

最新推荐文章于 2024-05-26 07:45:00 发布

每一天，每一步

最新推荐文章于 2024-05-26 07:45:00 发布

阅读量742

点赞数 5

分类专栏： ant design - react 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/u010234868/article/details/135742988

版权

ant design - react 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

本文介绍了如何在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 >