使用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 选择框

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