react + antd， ant-table中数据为异步加载时默认展开所有行的实现

实现效果：异步加载数据完成后展开所有的行：

1.defaultExpandAllRows属性默认展开所有行，但是该属性只在第一次render的时候生效，所以异步加载的数据无法实现默认展开
2.使用expandedRowKeys属性及onExpandedRowsChange方法：


完整代码：

import React, { Component } from "react";
import { Table } from "antd";

interface testProps {}
interface testSatate {
  dataSource: any[];
  expandedRowKeys: any[];
}
export default class test extends Component<testProps, testSatate > {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      expandedRowKeys: []
    };
  }
  private columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "电话",
      dataIndex: "tel",
      key: "tel"
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address"
    }
  ];
  componentDidMount() {
    //异步请求
    const data = [
      { name: "ll", tel: "12345", address: "cq" },
      { name: "ll", tel: "12345", address: "cq" }
    ];
    this.setState({
      dataSource: data,
      expandedRowKeys: data.map((item, index) => {
        return index;
      })
    });
  }
  private expandedRowsChange = expandedRowKeys => {
    this.setState({
      expandedRowKeys
    });
  };
  render() {
    const { dataSource, expandedRowKeys } = this.state;
    return (
      <div>
        <Table
          pagination={false}
          defaultExpandAllRows={true}
          className="ordersTable"
          columns={this.columns}
          dataSource={dataSource}
          expandedRowKeys={expandedRowKeys}
          onExpandedRowsChange={this.expandedRowsChange}
          expandedRowRender={(record: any) => <span>展开行的内容</span>}
        />
      </div>
    );
  }
}