526互联

使用 ant-design/pro-table

发布时间 2023-08-10 13:06:49作者: 白日梦想家er

 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中去。