antd的可展开Table的用后感

最新推荐文章于 2025-02-10 18:05:40 发布

努力搬砖121

最新推荐文章于 2025-02-10 18:05:40 发布

阅读量2.4k

点赞数 3

文章标签： reactjs vue.js

本文链接：https://blog.csdn.net/yuanmengfanseven/article/details/112003436

版权

本文分享了在项目中使用antd的可展开Table组件的体验，详细介绍了如何设置展开行及其样式。遇到的问题在于当不设置expandedRowRender时，Table组件会寻找children字段。解决方法是设置childrenColumnName属性，指定数据中用于展开的字段，从而达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用antd中的可展开table表格的用后感

可展开table表格，大概这样的效果

可展开table

基本使用方法 (ant-design官网)

import { Table } from 'antd';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  {
    title: 'Action',
    dataIndex: '',
    key: 'x',
    render: () => <a>Delete</a>,
  },
];

const data = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: 3,
    name: 'Not Expandable',
    age: 29,
    address: 'Jiangsu No. 1 Lake Park',
    description: 'This not expandable',
  },
  {
    key: 4,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
  },
];

ReactDOM.render(
  <Table
    columns={columns}
    expandable={{
      expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
      rowExpandable: record => record.name !== 'Not Expandable',
    }}
    dataSource={data}
  />,
  mountNode,
);

复制下来基本就能看到上面图片的效果。它带+的每行都是可以展开的，这里放的代码中设置的展开行是展示它的描述：

expandable={{
      expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>,
      rowExpandable: record => record.name !== 'Not Expandable',
    }}

其中 expandedRowRender是用来设置展开行的，rowExpandable是用来设置哪些行是可以带上+，可以进行展开的。
但是！我们在项目中的需求可能和antd给的不太一致。那么当我们想设置展开行和每一行的样式一样的话。不设置expandedRowRender即可。
那么我在项目中遇到过就是不设置expandedRowRender之后，也实现不到我想要的效果。不要急，先看看你的dataSource中是否有children这个字段（记不太清了，应该是），如果没有的话，就找到了问题的所在。那就是table表格在你没有设置expandedRowRender，它会自动找children这个字段，将它展示出来，没有找到它就无法正确展开显示。那么我们就需要设置childrenColumnName这个属性。

 <Table dataSource={dataSource} columns={columns}
        childrenColumnName='childList'
  > </Table>

上面代码中的childList就是你想显示在展示行中的数据。
这样就能实现数据中没有children字段，又能正确展示出来我们想要的效果了。