標籤<ProTable>

Pro-Table 是阿里Ant Design Pro V4版本，在Table基礎上再封裝的一個元件，包含完整的增刪改查邏輯，不用複雜的操作，簡單幾個配置即可實現

官網Api地址

https://protable.ant.design/

示例

V4版本剛出不久，網上的教程還比較少，踩了不少坑，把自己學習過程分享出來，希望可以幫到你

建立專案（需要node.js及npm環境）

npm config set registry https://registry.npm.taobao.org
npm i yarn -g
yarn config set registry https://registry.npm.taobao.org
//進入你準備建立專案的目錄
yarn create umi my-app
cd my-app
yarn
yarn start

建立專案完成後如圖

登入後如圖

新增選單

V4版本目錄結構有一些改變，影響不大，按步驟建立就行了

完成後，在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',// 列資料在資料項中對應的路徑，支援通過陣列查詢巢狀路徑
   width: '20%',},{
   title: '經營性質',dataIndex: 'nature',filters: [   // 表頭的篩選選單項
    { text: '個人',value: '個人' },{ text: '一般納稅人',value: '一般納稅人' },],width: '20%',{
   title: '聯絡人',dataIndex: 'linkMan',hideInSearch : 'false',// 設定搜尋欄是否顯示
  },{
   title: '聯絡電話',dataIndex: 'linkPhone',{
   title: '稅號',dataIndex: 'taxNumber',{
   title: '狀態',dataIndex: 'status',valueEnum: {        //當前列值的列舉
    false: { text: '禁用',status: 'Error' },//false是後臺傳的值，text是頁面顯示的，status是antd提供的狀態，具體看api
    true: { text: '啟用',status: 'Success' },];
 
 return (
  <PageHeaderWrapper>  //佈局標籤
   <ProTable      //表格Pro元件
    headerTitle="查詢表格"  //表頭
    actionRef={actionRef}  //用於觸發重新整理操作等，看api
    rowKey="id"        //表格行 key 的取值，可以是字串或一個函式
    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)}//請求資料的地方，例子是用mock模擬資料，我是在後臺請求的資料
    columns={columns}  //上面定義的
    rowSelection={{}}
   />
  </PageHeaderWrapper>
 );
}; 
export default TableList;

下面是請求資料的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;
}

前後端分離會有跨域問題出現，這裡在proxy裡配置代理解決

'/server/api/'表示以此開頭的請求都攔截，pathRewrite表示傳送請求時，所省略的

配置完成後訪問，

可以看到已經成功了，包括分頁，以及表頭篩選，條件查詢都是可以用的，新增刪除還沒有寫，等後面再補充吧！

補充知識：ant-design-pro的ProTable中column中設定valueEnum屬性

如果是給定得預設值，使用如下：

 {
   title: '是否過期',dataIndex: 'overdue',key: 'overdue',valueEnum: {
   0: {text: '未過期',1: {text: '已過期',}

或者先定義

 const enumList = {
 0: { text: '未過期' },1: { text: '已過期' },};
------------------------然後使用----------------------------
  {
      title: '是否過期',valueEnum: enumList
    }

但是如果valueEnum的值是通過介面獲取的，比如說，你想用資料庫裡的使用者id作為key，userName作為text:值，因為資料是會動態變化的，無法用列舉直接自定義，下面給出一種解決方法：

const [datas,setDatas] = useState({})
  useEffect(() => {
  //呼叫介面
   listOverdue().then((res) => {
   //如果響應成功
    if(res.bizCode===200){
     let data = {};
     //將拿到的返回值遍歷
     res.data.map(item=>{
  //使用介面返回值的id做為 代替原本的0，1
      data[item.id]={
  //使用介面返回值中的overdueValue屬性作為原本的text:後面的值
       text: item.overdueValue,}
     })
     setDatas(data) 
    }     
  })
 },[]);
 ----------------然後使用-----------------------------
 {
   title: '是否過期',valueEnum: datas
   }

這樣就可以使用了啊~

以上這篇Ant Design Pro 之 ProTable使用操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。