Ant Design Pro 之 ProTable使用操作
標(biāo)簽<ProTable>
Pro-Table 是阿里Ant Design Pro V4版本,在Table基礎(chǔ)上再封裝的一個(gè)組件,包含完整的增刪改查邏輯,不用復(fù)雜的操作,簡單幾個(gè)配置即可實(shí)現(xiàn)
官網(wǎng)Api地址
示例
V4版本剛出不久,網(wǎng)上的教程還比較少,踩了不少坑,把自己學(xué)習(xí)過程分享出來,希望可以幫到你
創(chuàng)建項(xiàng)目(需要node.js及npm環(huán)境)
npm config set registry https://registry.npm.taobao.org npm i yarn -g yarn config set registry https://registry.npm.taobao.org //進(jìn)入你準(zhǔn)備創(chuàng)建項(xiàng)目的目錄 yarn create umi my-app cd my-app yarn yarn start
創(chuàng)建項(xiàng)目完成后如圖
登錄后如圖
添加菜單
V4版本目錄結(jié)構(gòu)有一些改變,影響不大,按步驟創(chuàng)建就行了
完成后,在basicCustomer.tsx中寫入helloworld,測試能否成功訪問
import React from "react"; class Customer extends React.Component{ render(){ return ( <div>helloworld</div> ); } } export default Customer;
成功后用下面代碼替換
import { DownOutlined, PlusOutlined } from '@ant-design/icons'; import { Button, Dropdown, Menu} from 'antd'; import React, { useRef } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'; import { selectPage } from './service'; const TableList: React.FC<{}> = () => { const actionRef = useRef<ActionType>(); const columns: ProColumns[] = [ { title: '客戶名稱', //表頭顯示的名稱 dataIndex: 'name', // 列數(shù)據(jù)在數(shù)據(jù)項(xiàng)中對應(yīng)的路徑,支持通過數(shù)組查詢嵌套路徑 width: '20%', }, { title: '經(jīng)營性質(zhì)', dataIndex: 'nature', filters: [ // 表頭的篩選菜單項(xiàng) { text: '個(gè)人', value: '個(gè)人' }, { text: '一般納稅人', value: '一般納稅人' }, ], width: '20%', }, { title: '聯(lián)系人', dataIndex: 'linkMan', hideInSearch : 'false', // 設(shè)置搜索欄是否顯示 }, { title: '聯(lián)系電話', dataIndex: 'linkPhone', hideInSearch : 'false', }, { title: '稅號', dataIndex: 'taxNumber', }, { title: '狀態(tài)', dataIndex: 'status', valueEnum: { //當(dāng)前列值的枚舉 false: { text: '禁用', status: 'Error' }, //false是后臺傳的值,text是頁面顯示的,status是antd提供的狀態(tài),具體看api true: { text: '啟用', status: 'Success' }, }, }, ]; return ( <PageHeaderWrapper> //布局標(biāo)簽 <ProTable //表格Pro組件 headerTitle="查詢表格" //表頭 actionRef={actionRef} //用于觸發(fā)刷新操作等,看api rowKey="id" //表格行 key 的取值,可以是字符串或一個(gè)函數(shù) toolBarRender={(action, { selectedRows }) => [ <Button icon={<PlusOutlined />} type="primary" onClick={()=>{}}> 新建 </Button>, selectedRows && selectedRows.length > 0 && ( <Dropdown overlay={ <Menu selectedKeys={[]} > <Menu.Item key="remove">批量刪除</Menu.Item> </Menu> } > <Button> 批量操作 <DownOutlined /> </Button> </Dropdown> ), ]} request={(params) => selectPage(params)}//請求數(shù)據(jù)的地方,例子是用mock模擬數(shù)據(jù),我是在后臺請求的數(shù)據(jù) columns={columns} //上面定義的 rowSelection={{}} /> </PageHeaderWrapper> ); }; export default TableList;
下面是請求數(shù)據(jù)的service
import Qs from "qs"; import request from "umi-request"; const getRandomuserParams = (params:any) => { return { pageSize: params.pageSize, pageIndex: params.current, ...params }; }; export async function selectPage(params:any) { console.log(getRandomuserParams(params)) const res = request('/server/api/basic/basicCustomer/selectPageListCopy', { method: 'POST', headers:{ 'Content-Type':'application/x-www-form-urlencoded', appId: '1117664844619845632', token: 'eyJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1ODYzNDQ2MjcsImlkIjoiNzkxNzA2Y2Q2M2RiM2EwMSIsImV4cCI6MTU4ODkzNjYyNywiaWF0IjoxNTg2MzQ0NjI3fQ.Gtmm-TZHlMFiEV34ncrLryjzNsv07DwnCYsChQcYEWg' }, data: Qs.stringify(getRandomuserParams(params)), }); return res; }
前后端分離會有跨域問題出現(xiàn),這里在proxy里配置代理解決
'/server/api/'表示以此開頭的請求都攔截,pathRewrite表示發(fā)送請求時(shí),所省略的
配置完成后訪問,
可以看到已經(jīng)成功了,包括分頁,以及表頭篩選,條件查詢都是可以用的,新增刪除還沒有寫,等后面再補(bǔ)充吧!
補(bǔ)充知識:ant-design-pro的ProTable中column中設(shè)置valueEnum屬性
如果是給定得默認(rèn)值,使用如下:
{ title: '是否過期', dataIndex: 'overdue', key: 'overdue', valueEnum: { 0: {text: '未過期',}, 1: {text: '已過期',}, }, }
或者先定義
const enumList = { 0: { text: '未過期' }, 1: { text: '已過期' }, }; ------------------------然后使用---------------------------- { title: '是否過期', dataIndex: 'overdue', key: 'overdue', valueEnum: enumList }
但是如果valueEnum的值是通過接口獲取的,比如說,你想用數(shù)據(jù)庫里的用戶id作為key,userName作為text:值,因?yàn)閿?shù)據(jù)是會動態(tài)變化的,無法用枚舉直接自定義,下面給出一種解決方法:
const [datas, setDatas] = useState({}) useEffect(() => { //調(diào)用接口 listOverdue().then((res) => { //如果響應(yīng)成功 if(res.bizCode===200){ let data = {}; //將拿到的返回值遍歷 res.data.map(item=>{ //使用接口返回值的id做為 代替原本的0,1 data[item.id]={ //使用接口返回值中的overdueValue屬性作為原本的text:后面的值 text: item.overdueValue, } }) setDatas(data) } }) }, []); ----------------然后使用----------------------------- { title: '是否過期', dataIndex: 'overdue', key: 'overdue', valueEnum: datas }
這樣就可以使用了啊~
以上這篇Ant Design Pro 之 ProTable使用操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)動態(tài)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue開發(fā)利器之unplugin-auto-import的使用
unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下2023-02-02部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01vue elementUI table表格數(shù)據(jù) 滾動懶加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue elementUI table表格數(shù)據(jù)滾動懶加載的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04