使用 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 @ 2023-08-10 10:05  白日梦想家er  阅读(596)  评论(0编辑  收藏  举报