antd table 展开行 怎么设置为异步

在Ant Design的Table组件中，如果需要实现异步加载的展开行功能，你可以通过结合`expandedRowKeys`和`load`属性来实现。首先，你需要在表格数据加载完成后，更新`expandedRowKeys`数组，告诉Table哪些行需要展开。然后，`load`函数会在用户点击展开列的时候被触发，这个函数返回一个新的Promise，当Promise解析成功时，提供展开行的数据。

下面是一个简单的例子：

import { Table, Button } from 'antd';

const { Column, ExpandableRow } = Table;

class AsyncTable extends React.Component {
  state = {
    loadedData: [], // 异步加载的数据
    expandedRowsKeys: [] // 已展开行的键列表
  };

  async loadExpandedRow(key) {
    const rowData = await yourAsyncFunction(key); // 这里替换为你的异步获取数据的函数
    this.setState({
      loadedData: [...this.state.loadedData, rowData],
    });
    return Promise.resolve(rowData);
  }

  handleExpand = (record) => {
    this.setState((prevState) => ({
      expandedRowsKeys: prevState.expandedRowsKeys.includes(record.key)
        ? prevState.expandedRowsKeys.filter((key) => key !== record.key)
        : [...prevState.expandedRowsKeys, record.key],
    }));
  };

  render() {
    return (
      <Table
        expandedRowRender={(record) => (
          <span>
            展开内容...
            <Button onClick={() => this.loadExpandedRow(record.key)}>加载更多</Button>
          </span>
        )}
        expandedRowKeys={this.state.expandedRowsKeys}
        loading={!this.state.loadedData.length} // 判断是否正在加载
        load={this.handleExpand} // 当点击展开列时调用的load方法
        columns={[
          // ...其他列配置
          {
            title: '展开',
            render: () => <ExpandableRow expandedRowKeys={this.state.expandedRowsKeys} onExpand={this.handleExpand} />,
          },
        ]}
        dataSource={this.state.loadedData} // 加载后的数据显示在这里
      />
    );
  }
}

export default AsyncTable;