一、 自定义检索条件

部分列表页需要做一些简单的数据汇总统计，并能够跟随检索条件自动变化，protable自带的功能没有找到对应的实现方法，最后决定自己来实现这个功能。

1、关闭ProTable自带检索功能

search={false}

2、自定义检索表单

在ProTable上方加入自定义表单

<Card bordered={false} style={{ marginBottom: 15 }}>
          <ProForm
            hideRequiredMark
            style={{ marginTop: 8 }}
            layout="inline"
            onFinish={async (value) => {
              console.log(value);
              if (value.projects) {
                setProjectsData(value.projects.join(','));
              }
              if (value.month_start && value.month_end) {
                if (value.month_start > value.month_end) {
                  message.error('开始月份不能大于结束月份');
                  return false;
                }
              }
              setMonthStartData(value.month_start);
              setMonthEndData(value.month_end);
              monthTotal({
                projects: value.projects ? value.projects.join(',') : '',
                month_start: value.month_start,
                month_end: value.month_end,
              }).then((res) => {
                console.log(res);
                setData(res?.data);
              });
              if (actionRef.current) {
                actionRef.current?.reload();
              }
            }}
            submitter={{
              searchConfig: {
                resetText: '',
              },
            }}
          >
            <ProFormSelect
              name="projects"
              label="项目名称"
              options={projectSelect}
              placeholder="请选择项目"
              mode="multiple"
              style={{ minWidth: 200 }}
            />
            <ProFormDatePicker.Month
              name="month_start"
              label="开始月份"
              width={200}
              placeholder="请选择开始月份"
            />
            <ProFormDatePicker.Month
              name="month_end"
              label="结束月份"
              width={200}
              placeholder="请选择结束月份"
            />
          </ProForm>
        </Card>

这里需要配置ProForm的样式

layout="inline"

这样可以保证表单内容横向排列。

3、定义检索字段

把需要的检索条件都存储起来。

const [projectsData, setProjectsData] = useState<[]>();
const [monthStartData, setMonthStartData] = useState<[]>();
const [monthEndData, setMonthEndData] = useState<[]>();

然后再表单的提交方法里面onFinish，给这写内容赋值，同事调用数据统计的方法，将参数传过去获取新的统计结果。

4、 更新列表数据

在Proform的onFinish方法里面，给检索条件赋值成功后，刷新列表

if (actionRef.current) {
                actionRef.current?.reload();
              }

这个刷新需要给ProForm配置actionRef属性

<ProTable<API.CompanyList, API.PageParams>
            actionRef={actionRef}
            rowKey="key"
            search={false}
            request={async (params) => {
              params['projects'] = projectsData ? projectsData : '';
              params['month_start'] = monthStartData;
              params['month_end'] = monthEndData;
              const res = await monthCount(params);
              return res;
            }}
            columns={columns}
/>

这里我们在request的时候，将自定义的检索条件都给加到原参数上，然后调用列表数据接口，更新数据。

这样就完成了，在点击表单提交按钮的时候，获取汇总统计数据，同时刷新列表。展示效果如下：

有需要的还可以给自定义表单设置重置按钮，同时在reset方法里面同样给检索条件赋值，然后刷新表单即可。