Question

在Ant嵌套表中-扩展一行时，我想进行api调用并获取数据以显示嵌套表。

expandedRowRender函数，期望返回嵌套表，它不接受promise。

如何使用ajax调用显示嵌套的Ant表？

我试图重新创建场景以供参考。

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
import reqwest from "reqwest";

const nestedColumns = [
  {
    title: "Name",
    dataIndex: "name",
    sorter: true,
    render: name => `${name.first} ${name.last}`,
    width: "20%"
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" }
    ],
    width: "20%"
  },
  {
    title: "Email",
    dataIndex: "email"
  }
];

class App extends React.Component {
  state = {
    data: []
  };

  fetch = (params = {}) => {
    console.log("params:", params);
    reqwest({
      url: "https://randomuser.me/api",
      method: "get",
      data: {
        results: 10,
        ...params
      },
      type: "json"
    }).then(data => {
      return (
        <Table
          columns={nestedColumns}
          dataSource={data.results}
          pagination={false}
        />
      );
      // this.setState({
      //   data: data.results
      // });
    });
  };

  expandedRowRender = () => {
    this.fetch();
    return <table columns={nestedColumns} dataSource={this.state.data} />;
  };

  render() {
    const columns = [
      { title: "Name", dataIndex: "name", key: "name" },
      { title: "Platform", dataIndex: "platform", key: "platform" },
      { title: "Version", dataIndex: "version", key: "version" }
    ];

    const data = [
      {
        key: 1,
        name: "Screem",
        platform: "iOS",
        version: "10.3.4.5654"
      }
    ];

    return (
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        expandedRowRender={this.expandedRowRender}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

我会尽力回答您的问题。这是简化的代码类型，您可以了解如何做。

In state,
  

state = {
        data: null,
        loading: false,
      };
  


Here is your function to make API call,

  fetch=(expanded, record)=>{
                         
         axios.get(`put your api to load nested table`)
              .then(res=>{
                const data= res.data;
                
                this.setState({ 
                  ...this.state.data,
                  data,
                  loading: true      
                })
              }).catch(error=>{
                console.log(error, "error")
              })
            }

之后，

expandedRowRender =（）=> {

        if(this.state.loading){
          const nestedTableData = this.state.data.map(row => ({
            key: row.id,
            Id: row.id,
            name: 'test',
            gender: 'gender',
  }))
          const nestedColumns = [
            { title: "Name", dataIndex: "name", key: "name" },
            { title: "Gender", dataIndex: "gender", key: "gender" },
          ];
          return <Table columns={nestedColumns} dataSource={nestedTableData } pagination={false} />          
        }
      
    };
  

And put following code below return 
  
<Table
        className="components-table-demo-nested"
        columns={columns}
        dataSource={tableData}
        expandable={{

          expandedRowRender: this.expandedRowRender,
  
          rowExpandable: record => true,
          onExpand: this.fetch
  
      }}              
      />

I hope it may help you and let me know if it does. :)

展开表格以显示嵌套表格时，有没有办法进行api调用？

1 个答案: