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

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

ProTable

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

1、基礎(chǔ)流程

先來簡(jiǎn)單介紹一下基本的使用，主要就是兩部分：表格列配置、查詢請(qǐng)求，最后把他倆塞給 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: '審批單號(hào)',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: '時(shí)間',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' }}/></>);};

然后你就得到了這個(gè)簡(jiǎn)單但五臟俱全的表格：

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

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

同時(shí)所有 antd Table Column?支持的配置項(xiàng)都可以用在這里。

2、隱藏查詢條件

ProTable 默認(rèn)會(huì)顯示所有列的查詢條件，如果你想隱藏指定列的查詢條件，可以在列配置項(xiàng)里添加 hideInSearch：

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

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

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

3、查詢默認(rèn)值

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

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

4、列寬調(diào)整

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

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

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

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

const columns = [{title: '審批單號(hào)',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、查詢條件長(zhǎng)度調(diào)整

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

默認(rèn)情況下一個(gè) colSize 的長(zhǎng)度就是 8 span，那么也就是說 colSize: 4 時(shí)就可以占滿一行：

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

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

7、時(shí)間查詢條件改為范圍

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

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

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

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

ProForm

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

1、基礎(chǔ)流程

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

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

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

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

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

2、對(duì)齊提交按鈕

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

解決這個(gè)對(duì)齊問題需要用到 ProForm 的 submitter 屬性，而其中的 render 函數(shù)則可以控制底部按鈕組的渲染，這個(gè)函數(shù)的第二個(gè)入?yún)⑹且粋€(gè)數(shù)組，其元素分別是已經(jīng)渲染好的重置和提交按鈕，如果你有需要的話也可以在這里進(jìn)行更復(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，整個(gè)表單的數(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ù)獲取到之前展示加載動(dòng)畫，讓 form 渲染時(shí)肯定可以得到初始值return loadingPage ? (<Skeleton active />) : (<ProForm initialValues={detail}>{/* ... */}</ProForm>)
};

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

4、表單項(xiàng)聯(lián)動(dòng)

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

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="請(qǐng)?zhí)顚戱g回原因"/>);}}
</ProFormDependency>

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

歐窩

更多用法自己探索