antd是咱们罕用的一款react框架（等于没说,哈哈）
什么是ProComponents?
对于一个应用这个组件开发了半年之久的菜鸟来说,什么是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="转让到" />