antd-pro中的protable组件中,从接口获取搜索条件

antd-pro中的protable组件中,从接口获取搜索条件

遇到的问题

由于搜索条件和可选项不固定,需要从接口获取。于是在页面组件的useEffect中,获取搜索条件的属性和可选项,作为protable组件的column。

但这会引发一个问题;当页面刷新时,首先会渲染protable组件。通常情况下,columns是固定变量,不需要获取。所以表格渲染没什么问题,默认loading参数为true,会显示加载动画,等到request请求到表格数据后展示。

但是我们这里columns是需要从接口获取的。于是就会出现页面搜索信息也没有出来,表格信息也没有出来,也没有加载动画的状态,整个看上去想页面卡死了,然后过几秒后,突然所有信息同时加载出来。

解决办法

protable中增加loading参数。
在这里插入图片描述
文档里说是request会接管loading设置,但是我需要一个标志去出发request,于是我这样改:
在这里插入图片描述
设置loading参数,当loading为true,显示加载动画。
params参数设置columns,表示,当columns变化后,执行request请求。
当请求到数据时,再讲loading设置为false,否则就会一直显示加载动画。

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值