antd pro中表格怎么获取搜索条件的值
时间: 2023-08-11 19:06:11 浏览: 156
在Ant Design Pro中,表格的搜索条件值是通过`<Search>`组件传递给`<Table>`组件的。您可以使用`<Search>`组件的`onSearch`属性来获取搜索条件的值,然后将其传递给`<Table>`组件的`params`属性。例如:
```jsx
<Search
placeholder="请输入搜索关键字"
onSearch={(value) => {
// 在这里处理搜索操作
tableRef.current.reload({ params: { keyword: value } });
}}
/>
<ProTable
columns={columns}
request={fetchData}
params={{ keyword: '' }} // 初始搜索条件
tableAlertRender={false}
search={false}
rowKey="id"
headerTitle="表格"
actionRef={tableRef}
/>
```
在上面的代码中,我们使用了一个`tableRef`引用来获取`<Table>`组件的实例,然后在`<Search>`组件的`onSearch`回调中,通过`tableRef.current.reload`方法重新加载表格数据,并将搜索条件作为`params`属性传递给`<Table>`组件。
在`fetchData`函数中,您可以通过`params`参数获取搜索条件的值,例如:
```jsx
const fetchData = async ({ pageSize, current, keyword }) => {
const response = await fetch(`/api/data?pageSize=${pageSize}¤t=${current}&keyword=${keyword}`);
const data = await response.json();
return {
data: data.list,
total: data.total,
success: true,
};
};
```
在上面的代码中,我们通过`keyword`参数获取搜索条件的值,并将其作为查询参数传递给后端接口。
阅读全文