首先，可以通过使用React的useState hook来保存当前的搜索项数据和状态（是否展开）。例如：
```types
cript
const [searchParams, setSearchParams] = useState({
simType: '',
descript: '',
simuUser: '',
expanded: false,
});
```
其中，`searchParams` 对象保存了当前的搜索项数据和状态，`setSearchParams` 函数用于更新 `searchParams` 对象。
然后，在 ProTable 组件中，可以使用 `onSearch` 和 `onReset` 属性来监听搜索和重置事件，然后在事件处理函数中更新 `searchParams` 对象和 URL。例如：
```types
cript
const handleSearch = (params: any) => {
setSearchParams({...searchParams, ...params});
history.push(`/table?simType=${searchParams.simType}&
descript=${searchParams.
descript}&simuUser=${searchParams.simuUser}`);
};
const handleReset = () => {
setSearchParams({simType: '',
descript: '', simuUser: '', expanded: false});
history.push('/table');
};
<ProTable
search={{
labelWidth: 'auto',
optionRender: ({ searchText, resetText }, { form }) => [
<Button key="search" type="primary" onClick={() => handleSearch(form.getFieldsValue())}>
{searchText}
</Button>,
<Button key="reset" onClick={handleReset}>
{resetText}
</Button>,
],
}}
/>
```
在 `handleSearch` 函数中，首先使用展开运算符 `...` 合并当前的 `searchParams` 对象和表单传入的搜索项数据，然后使用 `history.push` 方法更新 URL。在 `handleReset` 函数中，直接清空 `searchParams` 对象，并将 URL 更新为 `/table`。
最后，在页面加载时，可以通过 `useEffect` hook 和 `location.search` 属性来获取 URL 中的搜索项数据，并更新 `searchParams` 对象。例如：
```types
cript
useEffect(() => {
const params = new URLSearchParams(location.search);
setSearchParams({
simType: params.get('simType') || '',
descript: params.get('
descript') || '',
simuUser: params.get('simuUser') || '',
expanded: false,
});
}, [location.search]);
```
这样，当页面刷新时，就可以保持搜索项数据和状态的一致性。
最低0.47元/天 解锁文章
428
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
