使用ProComponents和Antd的一些笔记使用ProComponents和Antd的一些笔记

antd是我们常用的一款react框架（等于没说,哈哈）
什么是ProComponents?
对于一个使用这个组件开发了半年之久的菜鸟来说,什么是ProComponents,
就是antd的加强集成版本,集成度很高，用起来很方便(对于我这个菜鸟来说容易踩坑),无论是elementUi vant antd...,组件使用情况大致类似,抽个时间记录一下,也增深一下印象，以后再遇到新的组件也好得心应手不是。
ProFormDigit 这段代码，为什么要在ProFormDigit套上form.item呢?
那是因为ProFormDigit有一个bug,
因为如果我直接点提交，就会跳过ProFormDigit对于输入的内容的限制,包括（数字，位数，最大值，最小值）都会没来得及校验，提交上去~~

这个组件是酱紫的~

文章图片

时间组件ProFormDateRangePicker 一般使用

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

在useColumns中使用

const columns = defineProTableColumn([ { 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 选择框

【使用ProComponents和Antd的一些笔记】 { setData(staffList.find((item) => item.employeeId == e)); }, }} help={currentStore?.storeType === 'community' && '转让后你就不是该小区的负责人，请慎用！'} name="employeeId" options={staffList.map((item) => ({ label: item.employeeName, value: item.employeeId, }))} label="转让到" />