proTable自定义搜索表单

proTable是一个基于Ant Design和UmiJS的高级表格组件，它可以帮助我们快速构建搜索表单、数据表格和分页功能。在proTable中，我们可以通过配置来自定义搜索表单。

首先，我们需要引入proTable组件和相关依赖：

import { ProTable, ProFormText, ProFormDateRangePicker } from '@ant-design/pro-table';
import { Space } from 'antd';

然后，我们可以在ProTable组件中使用ProFormText和ProFormDateRangePicker组件来构建搜索表单：

<ProTable
  search={{
    filterType: 'light',
  }}
  headerTitle="搜索表单"
  rowKey="id"
  request={fetchData}
  columns={columns}
  toolBarRender={() => [
    <Space>
      <ProFormText name="name" label="姓名" />
      <ProFormDateRangePicker name="date" label="日期" />
    </Space>
  ]}
/>

在上面的代码中，我们通过toolBarRender属性自定义了搜索表单，使用了ProFormText组件和ProFormDateRangePicker组件来分别创建姓名和日期的搜索项。

最后，我们还需要定义fetchData函数来处理搜索表单的提交和数据请求：

const fetchData = async (params) => {
  // 根据params中的搜索条件发起数据请求
  // ...
  // 返回请求结果
};

上面的代码是一个示例，你需要根据自己的业务逻辑来实现fetchData函数，根据params中的搜索条件发起数据请求，并返回请求结果。

通过上述步骤，我们就可以在proTable中自定义搜索表单了。你可以根据自己的需求来添加、删除或修改搜索项，以满足不同的业务场景