使用 ant-design/pro-table

 1.使用pro-table如果没有任何配置项,那么table会自动在表格上部根据你的表格列生成一个查询表单。如果不需要只需设置属性search = false;

如果只是某一项在这里有查询,那么只需要在columns该项中设置hideInSearch:true即可。

2.beforeSearchSubmit方法,入参为搜索表单的数据,在搜索前对参数处理,比如添加一些标识数据,最后需返回参数。

返回的参数就是request的params,即查询数据的入参。

3.在表格的右上角会有四个操作按钮,可以通过options来设置显示这个,隐藏那个。分别为:密度、全屏、刷新、列设置。

  options={{ density: false, fullScreen: false, reload: false, setting: true }}

4.onLoad方法,在数据加载完成后触发,可以多次触发。

5.postData方法,对通过url获取的数据在渲染到表格前进行处理,比如筛选掉无效数据。

6.actionRef获取一些预设的操作表单的方法,包括:刷新,重置所有项并刷新,重置到默认项。

复制代码
const tableRef = useRef<ActionType>();
<GTable

actionRef={tableRef}>

//刷新
tableRef.current.reload();

//重置所有项并刷新
tableRef.current.reloadAndRest();

//加载更多
tableRef.current.fetchMore();

//重置到默认值
tableRef.current.reset();

//清空选中项
tableRef.current.clearSelected();
复制代码

问题重现

在useEffect中获取的接口数据,没有通过配置ProTable的request,导致无法触发页面刷新等操作,解决的方法就是将useEffect里的操作挪到ProTable的request中去。

 

posted @   白日梦想家er  阅读(736)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
点击右上角即可分享
微信分享提示