antd ProTable 对筛选条件组件 设置参数 或 自定义

antd ProTable 筛选条件必填，或者设置其他参数的方法：

设置参数

    {
      title: formatMessage({ id: 'component.TeamOuting.account_date' }),
      // title: '公出日期',
      hideInTable: true,
      valueType: 'dateRange',
      dataIndex: 'account_date',
      key: 'account_date',
      order: 5,
      initialValue: [
        `${moment().startOf('month').format('YYYY-MM-DD')}`,
        `${moment().format('YYYY-MM-DD')}`,
        '',
        '',
      ],
      // 时间区间转化为2个字段
      search: {
        transform: (value: any) => ({
          begin_date: value[0],
          end_date: value[1],
        }),
      },
      // 传递给 Form.Item 的配置
      formItemProps: {
        rules: [
          {
            required: true,
            message: formatMessage({ id: 'component.select.placeholder' }),
          }
        ]
      }
    },

配置rules记得添加

form={{
  ignoreRules: false,
}}

image.png

自定义组件

    {
      title: formatMessage({ id: 'component.PersonnelChanges.company_name' }),
      key: 'company_ids',
      dataIndex: 'company_ids',
      hideInTable: true,
      valueType: 'select',
      order: 4,
      renderFormItem: (item, { type }, form) => {
        if (type === 'form') {
          return null;
        }
        return (
          <ProFormSelect
            showSearch
            debounceTime={300}
            fieldProps={{
              mode: 'multiple',
              autoClearSearchValue: true,
              onChange: () => {
                form.setFieldsValue({ dept_ids: [] });
              },
            }}
            request={async ({ keyWords }) => {
              const res = await companyOrgList({
                filter: { parent_id: '', state: 'true', keyword: keyWords },
                page_num: 1,
                page_size: 20,
              });
              if (res.code === 200 && res.data && res.data.rows) {
                res.data.rows.map((v: any) => {
                  v.label = v.name;
                  v.value = v.id;
                  return v;
                });
              } else {
                return [];
              }
              return res.data.rows;
            }}
          />
        );
      },
    },

image.png