使用ProComponents和Antd的一些筆記

HappyCodingTop發表於2021-12-06
筆記

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>

這個元件是醬紫的~
image.png

時間元件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="轉讓到"
      />

相關文章