关于antd:使用ProComponents和Antd的一些笔记

72次阅读

共计 1557 个字符，预计需要花费 4 分钟才能阅读完成。

antd 是咱们罕用的一款 react 框架（等于没说, 哈哈）

对于一个应用这个组件开发了半年之久的菜鸟来说, 什么是 ProComponents,
就是 antd 的增强集成版本, 集成度很高，用起来很不便 (对于我这个菜鸟来说容易踩坑), 无论是 elementUi vant antd…, 组件应用状况大抵相似, 抽个工夫记录一下, 也增深一下印象，当前再遇到新的组件也好得心应手不是。

ProFormDigit

这段代码，为什么要在 ProFormDigit 套上 form.item 呢?
那是因为 ProFormDigit 有一个 bug,
因为如果我间接点提交，就会跳过 ProFormDigit 对于输出的内容的限度, 包含（数字，位数，最大值，最小值）都会没来得及校验，提交下来~~

<Form.Item
        style={{width:'300px'}}
          name="percent"
          rules={[
            {
              required: true,
              message: '请输出调整比例',
            },
            {pattern:/^([1-9][0-9]{0,1}|100)$/,
              message:'请输出 1 到 100 之间的整数',
            },
          ]}
          >
            <ProFormDigit
              fieldProps={{precision: 0}}
              label=""
              width={150}
              placeholder="请输出调整比例"
              min={0}
              max={100}
            />
          </Form.Item>

这个组件是酱紫的~

工夫组件 ProFormDateRangePicker

个别应用

import {ProFormDateRangePicker,} from '@ant-design/pro-form'



<ProFormDateRangePicker width="md" name={['contract', 'createTime']} label="合同失效工夫" />

在 useColumns 中应用

const columns = defineProTableColumn<MaintenanceListVo>([
 {
      title: '投诉工夫',
      dataIndex: 'createTime',
      key: 'createTime',
      hideInSearch: true,
    },
 {
      title:'',
      dataIndex: 'createTime',
      key: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
      fieldProps: {placeholder: ['投诉工夫','投诉工夫'],
      },
      search: {transform: (value) => {
        return {startTime: value[0],
          endTime: value[1],
        };
      },
    },
    },
      ]);


      /** 解决表格列 */
export function useColumns() {return { columns};
}

ProFormSelect 抉择框

<ProFormSelect
        width={364}
        rules={[
          {
            required: true,
            message: '请抉择要转让的员工',
          },
        ]}
        placeholder="请抉择人员"
        fieldProps={{onChange: (e) => {setData(staffList.find((item) => item.employeeId == e));
          },
        }}
        help={currentStore?.storeType === 'community' && '转让后你就不是该小区的负责人，请慎用！'}
        name="employeeId"
        options={staffList.map((item) => ({
          label: item.employeeName,
          value: item.employeeId,
        }))}
        label="转让到"
      />

正文完