AntDesign <Table> 如何使用载入 loading 效果?

Question

问题描述:
在父组件调接口获取数据,传到弹窗子组件的<Table>中显示.当获取完数据后,设置子组件loading为false.

当前情况:loading只是显示了很短时间,然后消失,
数据还得等一会,才会显示出来.

好像存在一个时间差,设置的loading为false时间点不对.

核心问题: 应该是数据获取完了,但还需要传递给子组件,子组件还要渲染出来,这两部分时间,也应该放在loading之前才对.如何操作?

  state = {
    loading: true,
    ...
    }


<Table
loading={this.state.loading}
...
/>

===============================================
当前实现方法:
父组件:

 setTableFormLoading = () => {
 //调用子组件方法,设置loadinng为flase
    this.child.hideLoading() 
}

getMetaData() {
    ... ... 
    //获取数据后调用方法
  this.setTableFormLoading()
}
//父组件中引用子组件(弹窗)
<TableForm
  onRef={(child) => { this.child = child }}
/>

子组件:

state={loading:true}

  componentDidMount() {
    // 子组件 componentDidMount 中接收 onRef 并把 this 传给父组件
    this.props.onRef(this);
  }


  hideLoading = () => {
    this.setState({
      loading: false
    })
  }
  
  
  <Table
    ... ...
    loading={this.state.loading}
  />  
  

获取数据方法:(在父组件中)

  getMetaData() {
    const that = this;
    const params = {
      schema: this.state.model.desSchema,
      table_name: this.state.model.desTableName
    };
    Uitl.get(
      "/data/getData",
      params,
      function(data: any) {
        if (data.isSuccess) {
          console.log(data);
          const metaDataList: any[] = [];
          // const expandedKeys: any[]= [];
          if (!Array.isArray(data.result)) return;
          data.result.forEach((item: any, index: any) => {
            const metaData = {
              key: index,
              index: index + 1,
              aliasName: "string",
              id: "string",
              isAggregation: false,
              name: item.fieldName,
              orderInfo: "NONE",
              tableAliasName: "string",
              type: item.columnType
            };
            metaDataList.push(metaData);
          });

          setTimeout(() => {
            that.setState({
              metaDataList: [...metaDataList]
            });
          }, 1000);
          that.setTableFormLoading() //调用子组件方法
          console.log(metaDataList);
        } else {
          message.error("获取失败");
        }
      },
      function(data: any) {
        message.error(data.message);
      }
    );
  }

Answer 1

你可以把获取数据那个方法贴出来

Answer 2

loading设为false要写在异步获取数据之后，不知道这段代码写成什么样的

Answer 3

我理解错了 代码已删。
atnd table 虽然提供了loading字段来触发，但是没有提供内部的回调。也许可以做成不真实的loading.
比如数据回来之后 loading在延迟1-2(1-2的随机数)s之后关闭

由于每次loading的时间差异性，所以会有错觉是真实的loading。