antd 表格树如何展开_React Ant Design树形表格的复杂增删改

对于Ant Design的树形表格，你可以使用`expandedRowKeys`属性来控制表格树的展开和折叠。

首先，你需要在组件的state中维护一个包含展开行的keys数组。然后，将该数组传入`expandedRowKeys`属性中。

例如，假设你的表格数据如下所示：

const data = [
  {
    key: '1',
    name: 'Parent 1',
    children: [
      {
        key: '2',
        name: 'Child 1',
      },
      {
        key: '3',
        name: 'Child 2',
      },
    ],
  },
  {
    key: '4',
    name: 'Parent 2',
    children: [
      {
        key: '5',
        name: 'Child 3',
      },
      {
        key: '6',
        name: 'Child 4',
      },
    ],
  },
];

你可以创建一个包含展开行keys的state：

state = {
  expandedRowKeys: [],
};

然后，在表格组件中使用`expandedRowKeys`属性：

<Table
  dataSource={data}
  expandedRowKeys={this.state.expandedRowKeys}
  onExpand={this.handleExpand}
  columns={columns}
/>

接下来，你需要实现`handleExpand`方法来处理行的展开和折叠：

handleExpand = (expanded, record) => {
  const { key } = record;
  const { expandedRowKeys } = this.state;

  // 如果是展开操作，则将key添加到expandedRowKeys中
  // 如果是折叠操作，则将key从expandedRowKeys中移除
  const newExpandedRowKeys = expanded
    ? [...expandedRowKeys, key]
    : expandedRowKeys.filter(k => k !== key);

  this.setState({ expandedRowKeys: newExpandedRowKeys });
};

这样，当你点击表格树的展开按钮时，`handleExpand`方法会被调用，更新`expandedRowKeys`的状态，从而控制表格树的展开和折叠。

关于树形表格的复杂增删改，具体的实现方式会根据你的需求而有所不同。你可以根据需要，在表格中添加按钮或其他交互元素，并编写对应的逻辑来实现增删改操作。