Ant-Design-Pro-Components:ProTable组件 对筛选条件 设置参数 或 自定义组件。

Ant-Design-Pro-Components: 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,
}}

在这里插入图片描述

二、自定义组件

    {
      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;
            }}
          />
        );
      },
    },

三、Columns 列定义属性

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值