相信很多同學(xué)都用過 Ant Design 這一 react 著名組件庫，而 ProComponents 則是在 antd 之上進行封裝的頁面級組件庫（指一個組件就可以搞定一個頁面）。它同時也是 Ant Design Pro?中后臺框架所用的主要組件庫。如果你手上有要用 react 開發(fā)的中后臺新項目又人手不夠的話，我強烈推薦你體驗一下這個庫。可以極大的減少日常 CRUD 的代碼量并統(tǒng)一風(fēng)格。

在 ProComponent 中，最為核心的就是 ProForm（表單）和 ProTable（表格）兩個組件，面對數(shù)量繁多的配置項，很多人都會在文檔中迷失自我，本文就來總結(jié)了一些常見的配置。

ProTable

ProTable 最大的好處就是它集成了表格的查詢條件和分頁配置。只需要配置表格列就可以自動生成對應(yīng)的查詢 form。除此之外它提供的插槽和細節(jié)小功能用起來也十分舒服。

1、基礎(chǔ)流程

先來簡單介紹一下基本的使用，主要就是兩部分：表格列配置、查詢請求，最后把他倆塞給 ProTable 就完事了：

import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, ModalForm } from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';type GithubIssueItem = {};export default () => {const actionRef = useRef<ActionType>();const columns: ProColumns<GithubIssueItem>[] = [{title: '審批單號',key: 'showTime',dataIndex: 'showTime',valueType: 'text',},{title: '任務(wù)狀態(tài)',key: 'showTime3',dataIndex: 'showTime3',valueType: 'select',valueEnum: {open: {text: '審核中',status: 'Error',},closed: {text: '已完成',status: 'Success',},processing: {text: '已作廢',status: 'Processing',},submited: {text: '待提交',status: 'Processing',},},},{title: '時間',key: 'showTime5',dataIndex: 'showTime5',valueType: 'date',},{title: '資料大類',key: 'showTime9',dataIndex: 'showTime9',valueType: 'select',fieldProps: { mode: 'multiple' },//多選valueEnum: {pages: {text: '頁面',status: 'pages',},Copywriting: {text: '文案',status: 'Copywriting',},},},{title: '操作',valueType: 'option',key: 'option',render: (text, record, _, action) => [<a>詳情</a>],},];//獲取table數(shù)據(jù)const getTableData = async (param: any) => {const params = {...param,};// const { data, success } = await fetchCompanyList(params);return {data: [{}],success: true,page: 1,total: 0,};};return (<><ProTable<GithubIssueItem>columns={columns}actionRef={actionRef}request={getTableData}headerTitle="結(jié)果查詢"search={{ labelWidth: 'auto' }}/></>);};

然后你就得到了這個簡單但五臟俱全的表格：

在 ProTable 中查詢條件和表格列是一一對應(yīng)的，通過columns來配置，也就是說每個列都會生成一個對應(yīng)的查詢條件，注意列配置中的 valueType 字段，不同的值可以讓輸入框變成日期、下拉、多選、進度條等等詳細點擊這里查看，然后 ProTable 就會按照對應(yīng)的格式渲染表格字段和查詢表單項。

在發(fā)起查詢時，你所有的查詢條件和分頁參數(shù)都會被傳遞給 request 參數(shù)對應(yīng)的函數(shù)上，最后把查詢到的結(jié)果按照給定的格式返回出去即可，注意這個函數(shù)可以是異步函數(shù)，ProTable 會根據(jù)這個函數(shù)的狀態(tài)自動渲染相關(guān)的加載動畫，非常舒服。

同時所有 antd Table Column?支持的配置項都可以用在這里。

2、隱藏查詢條件

ProTable 默認會顯示所有列的查詢條件，如果你想隱藏指定列的查詢條件，可以在列配置項里添加 hideInSearch：

const columns = [{title: '審批單號',key: 'showTime',dataIndex: 'showTime',valueType: 'text',hideInSearch: true, //隱藏查詢條件},
];

或者如果想直接隱藏整個查詢表單的話，可以在 ProTable 上關(guān)閉 search 項：

<ProTablesearch={false}// 不顯示搜索表單columns={columns}request={getData}rowKey="id"
/>

3、查詢默認值

你可以通過列表項的 initialValue 來給查詢表單項設(shè)置默認值：

const columns = [{title: '申請日期',dataIndex: 'applyDate',valueType: 'date',align: 'center',initialValue: '2021-7-1',// 設(shè)置默認值},// ...
];

4、列寬調(diào)整

ProTable 默認會等分所有列，想調(diào)整指定列寬的話可以修改列配置的 width 屬性，支持百分比和數(shù)字。

// 表格行配置項
const columns = [{title: '企業(yè)名稱',dataIndex: 'corName',width: '70%',    // 設(shè)置為百分比},{title: '申請日期',dataIndex: 'applyDate',valueType: 'date',width: 240,    // 設(shè)置為固定值}
];

5、查詢條件順序調(diào)整

ProTable 默認按照列配置的索引排列查詢條件，你可以通過指定列配置項中的 order 來調(diào)整查詢條件的順序，其值越大就越靠前：

const columns = [{title: '審批單號',key: 'showTime',dataIndex: 'showTime',valueType: 'text',order: 9,},{title: '任務(wù)狀態(tài)',key: 'showTime3',dataIndex: 'showTime3',valueType: 'select',order: 10,valueEnum: {open: {text: '審核中',status: 'Error',},closed: {text: '已完成',status: 'Success',},processing: {text: '已作廢',status: 'Processing',},submited: {text: '待提交',status: 'Processing',},},},
];

6、查詢條件長度調(diào)整

你可以通過指定列配置的 colSize 項來調(diào)整具體查詢條件的長度，官方介紹如下：

默認情況下一個 colSize 的長度就是 8 span，那么也就是說 colSize: 4 時就可以占滿一行：

const columns = [{title: '審批單號',key: 'showTime',dataIndex: 'showTime',valueType: 'text',colSize: 4,order: 9,},//...
];

注意這個值沒必要是整數(shù)，你可以設(shè)置為 0.5 來將其縮短，但是要注意最后相乘得到的 span 值最好是個整數(shù)。

7、時間查詢條件改為范圍

默認的 valueType: 'date' 只會顯示單個日期選擇器，所以我們需要使用其他方法來實現(xiàn)這個需求，具體做法也很簡單，把表格列的查詢項關(guān)掉，然后放置一個時間范圍的查詢條件，注意時間范圍使用 hideInTable 參數(shù)讓它不會顯示在表格里：

// 表格行配置項
const columns = [{title: '申請日期',dataIndex: 'applyDate',valueType: 'date',hideInSearch: true},{title: '申請日期',dataIndex: 'applyDateRange',valueType: 'dateRange',fieldProps: { placeholder: ['開始時間', '結(jié)束時間'] },hideInTable: true},
];

然后你就可以在 request 里處理他們：

const getData = async (params) => {const query = {...params,applyDateStart: (params.applyDateRange || [])[0],applyDateEnd: (params.applyDateRange || [])[1]};delete query.applyDateRange;// 發(fā)起請求 ...
};

ProForm

ProForm 的好處是封裝了不同的表單外觀，你只需要切換一個字段就可以把頁面表單切換成彈出表單或者抽屜表單。除此之外還封裝了提交和重置行為、以及對常用的表單項都進行了封裝。

1、基礎(chǔ)流程

ProTable 的用法更加簡單，在 ProForm 標簽里插入封裝好的 表單項。然后給 onFinish 設(shè)置一個函數(shù)即可，這個函數(shù)會接受到 通過校驗 的表單項，然后你就可以在這里訪問后端進行提交了。

import ProForm, {ProFormRadio,ProFormText,ProFormDatePicker,
} from '@ant-design/pro-form';const PolicyDetail = (props) => {// 只有通過校驗之后才會觸發(fā)這個方法const onSubmit = async (values) => {console.log(values);};return (<ProForm onFinish={onSubmit}><ProFormTextname="name"label="名稱"placeholder="請輸入名稱"/><ProFormRadio.Groupname="status"label="狀態(tài)"options={[{ label: '已生效', value: '已生效' },{ label: '已作廢', value: '已作廢' }]}rules={[{ required: true, message: '狀態(tài)不能為空' }]}/><ProFormDatePickername="publishTime"label="時間"placeholder="請選擇時間"rules={[{ required: true, message: '時間不能為空' }]}/></ProForm>);
};

注意，在 ProForm 中，select, checkbox, radio, radioButton 這些表單項都支持通過 options 參數(shù)配置選項內(nèi)容，其值為 { value: '', label: ''} 格式的數(shù)組。具體介紹可以看 這里。

注意，所有的 ProForm 表單組件都是用 Form.Item + 對應(yīng)的組件封裝的來的，都支持使用 fieldProps 屬性來支持設(shè)置輸入組件的 props。

也就是說，fieldProps 參數(shù)里的屬性都會被透傳給內(nèi)部的輸入組件，而直接設(shè)置給 ProForm 表單組件的字段會被透傳給 Form.Item。切記切記，不要一看到表單項列表里一點屬性都沒貼就覺得這玩意沒法用了。

2、對齊提交按鈕

大多數(shù)表單開發(fā)的習(xí)慣都是底部的操作按鈕組和字段輸入框?qū)R，但如果你給 form 配置了 layout="horizontal" 和 labelCol={{ span: 4 }} 后就會發(fā)現(xiàn)，底部的按鈕組還是左側(cè)開始的。

解決這個對齊問題需要用到 ProForm 的 submitter 屬性，而其中的 render 函數(shù)則可以控制底部按鈕組的渲染，這個函數(shù)的第二個入?yún)⑹且粋€數(shù)組，其元素分別是已經(jīng)渲染好的重置和提交按鈕，如果你有需要的話也可以在這里進行更復(fù)雜的自定義行為：

<ProFormsubmitter={{render: (_, dom) => (<Form.Item wrapperCol={{ offset: 4 }}><Space>{dom}</Space></Form.Item>),}}// ...
>{/* ... */}
</ProForm>

注意我上面 wrapperCol 的 offset 是 4，你需要根據(jù)你的 ProForm 配置自行調(diào)整。

3、數(shù)據(jù)回填

想回填數(shù)據(jù)的話需要用到 ProForm 的 initialValues，整個表單的數(shù)據(jù)都應(yīng)該在這里設(shè)置。注意在數(shù)據(jù)獲取到之前不能渲染表單，不然初始值就無效了。

import React, { useState, useEffect } from 'react';
import ProForm from '@ant-design/pro-form';
import { Skeleton } from 'antd';
import { isEmpty } from 'lodash';
import { getDetail } from '@/service';const Detail = () => {// 詳情數(shù)據(jù)const [detail, setDetail] = useState({});// 獲取詳情useEffect(async () => {const { data } = await getDetail();setDetail(data);}, []);const loadingPage = isEmpty(detail);// 數(shù)據(jù)獲取到之前展示加載動畫，讓 form 渲染時肯定可以得到初始值return loadingPage ? (<Skeleton active />) : (<ProForm initialValues={detail}>{/* ... */}</ProForm>)
};

我注意到有很多人在回填表單數(shù)據(jù)的時候喜歡用 form.setFieldsValue 設(shè)置，但是這么做是不對的，一方面在數(shù)據(jù)抵達的時候 form 表單項可能還沒加載出來，另一方面使用 initialValues 可以讓重置按鈕可以恢復(fù)到初始值，而不是重置成全空表單。

4、表單項聯(lián)動

表單里經(jīng)常會出現(xiàn)如下這種表單項聯(lián)動的需求：

ProComponent 中提供了 ProFormDependency 組件可以響應(yīng)式的處理這種需求：

import ProForm, { ProFormRadio, ProFormDependency } from '@ant-design/pro-form';<ProFormRadio.Groupname="status"label="結(jié)論"options={[{ label: '審核通過', value: 1 },{ label: '審核不通過', value: 2 }]}
/><ProFormDependency name={['status']}>{({ status }) => {if (!status || status === 1) return null;return (<ProFormTextAreaname="refuseReason"label="駁回原因"placeholder="請?zhí)顚戱g回原因"/>);}}
</ProFormDependency>

ProFormDependency 在 name 字段里綁定的值變更后會自動觸發(fā) children 里的函數(shù)進行渲染。

歐窩

更多用法自己探索