基础功能无非是增删改查，用于熟悉路由，组件，传值等Antd Pro的常用功能
上文介绍了Antd Pro的基础搭建，再此基础上进行实践
Antd Pro默认版本V5
一.菜单
首先配置左侧菜单列表，文件夹config》config.ts中找到routes:
添加如下内容：
{ path:'/myapp', name:'我的应用', icon:'AppstoreFilled', routes:[ { name:'应用列表', path:'./user/manage', component:'./user/manage' } ], }
结果下图所示：
二.模块
找到文件夹pages,创建文件夹user,再创建文件夹manage。
然后配置页面，请求，数据模型等。
最后结构如下图所示：
components:用于放置页面常用的组件
data.d.ts:用到的数据模型
index.tsx:模块的主页面
service.ts:封装了用到的Api请求函数
这种结构的细分对后期项目维护非常友好，缺点是前期开发速度受影响
（1）准备工作
1.1 封装数据模型data.d.ts
1 export type TableListItem = { 2 id: string; 3 rolename: string; 4 account: string; 5 username: string; 6 }; 7 export type TableListPagination = { 8 total: number; 9 pageSize: number; 10 current: number; 11 };
1.2 封装用到的API请求
在Antd Pro中是通过Mock实现，本篇用.net core Api进行替换，后端代码在下文附件中下载
1 // @ts-ignore 2 /* eslint-disable */ 3 import { request } from 'umi'; 4 import { TableListItem } from './data'; 5 6 /** 获取列表 */ 7 export async function rule( 8 params: { 9 // query 10 /** 当前的页码 */ 11 current?: number; 12 /** 页面的容量 */ 13 pageSize?: number; 14 }, 15 options?: { [key: string]: any }, 16 ) { 17 return request<{ 18 data: TableListItem[]; 19 /** 列表的内容总数 */ 20 total?: number; 21 success?: boolean; 22 }>('http://localhost:4089/User', { 23 method: 'GET', 24 params: { 25 ...params, 26 }, 27 ...(options || {}), 28 }); 29 } 30 31 /** 更新 */ 32 export async function updateRule(data: { [key: string]: any }, options?: { [key: string]: any }) { 33 return request<TableListItem>('http://localhost:4089/User/Update', { 34 data, 35 method: 'PUT', 36 ...(options || {}), 37 }); 38 } 39 40 /** 新建 */ 41 export async function addRule(data: { [key: string]: any }, options?: { [key: string]: any }) { 42 return request<TableListItem>('http://localhost:4089/User/Add', { 43 data, 44 method: 'POST', 45 ...(options || {}), 46 }); 47 } 48 49 /** 删除 */ 50 export async function removeRule(data: { key: string[] }, options?: { key: string[] }) { 51 return request<Record<string,string[]>>('http://localhost:4089/User', { 52 data, 53 method: 'DELETE', 54 ...(options || {}), 55 }); 56 }
（2）列表 index.tsx
实现效果如下：
代码如下：
1 import { PlusOutlined } from '@ant-design/icons'; 2 import { Button, message } from 'antd'; 3 import React, { useState } from 'react'; 4 import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; 5 import type { ProColumns } from '@ant-design/pro-table'; 6 import ProTable from '@ant-design/pro-table'; 7 import { rule, addRule,updateRule,removeRule } from './service'; 8 import type { TableListItem, TableListPagination } from './data';import CreateForm from './components/CreateForm'; 9 import UpdateForm from './components/UpdateForm'; 10 11 12 const handleRemove = async (selectedRows: TableListItem[]) => { 13 const hide = message.loading('正在删除'); 14 if (!selectedRows) return true; 15 console.log( selectedRows); 16 console.log( selectedRows.map((row) => row.id)); 17 try { 18 await removeRule({ 19 key: selectedRows.map((row) => row.id), 20 }); 21 hide(); 22 message.success('删除成功，即将刷新'); 23 return true; 24 } catch (error) { 25 hide(); 26 message.error('删除失败，请重试'); 27 return false; 28 } 29 }; 30 31 const TableList: React.FC = () => { 32 const [visible, setVisible] = useState<boolean>(false); 33 const [current, setCurrent] = useState<Partial<TableListItem> | undefined>(undefined); 34 const [updvisible, setUpdvisible] = useState<boolean>(false); 35 const handleSubmit = (values: TableListItem) => 36 { 37 addRule({ ...values }); 38 message.success('添加成功'); 39 setVisible(false); 40 }; 41 const handleUpdSubmit = (values: TableListItem) => 42 { 43 updateRule({ ...values }); 44 message.success('修改成功'); 45 setUpdvisible(false); 46 }; 47 48 const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]); 49 50 const columns: ProColumns<TableListItem>[] = [ 51 { 52 title: 'id', 53 dataIndex: 'id', 54 valueType: 'textarea', 55 hideInForm: true, 56 hideInTable: true 57 }, 58 { 59 title: '角色名称', 60 dataIndex: 'rolename', 61 valueType: 'textarea', 62 }, 63 { 64 title: '用户名', 65 dataIndex: 'username', 66 valueType: 'textarea', 67 }, 68 { 69 title: '账号', 70 dataIndex: 'account', 71 valueType: 'textarea', 72 }, 73 { 74 title: '操作', 75 dataIndex: 'option', 76 valueType: 'option', 77 render: (_, record) => [ 78 <a 79 key="Id" 80 onClick={(e) => { 81 e.preventDefault(); 82 setUpdvisible(true); 83 setCurrent(record); 84 }} 85 > 86 修改 87 </a> 88 ], 89 }, 90 ]; 91 92 return ( 93 <PageContainer> 94 <ProTable<TableListItem, TableListPagination> 95 headerTitle="查询表格" 96 rowKey="id" 97 search={{ 98 labelWidth: 120, 99 }} 100 toolBarRender={( ) => [ 101 <Button 102 type="primary" 103 key="primary" 104 onClick={() => { 105 setVisible(true); 106 }} 107 > 108 <PlusOutlined /> 109 新建 110 </Button> 111 ]} 112 request={rule} 113 columns={columns} 114 rowSelection={{ 115 onChange: (_, selectedRows) => { 116 console.log("选择开始："+selectedRows.length); 117 setSelectedRows(selectedRows); 118 }, 119 }} 120 /> 121 {selectedRowsState?.length > 0 && ( 122 <FooterToolbar 123 extra={ 124 <div> 125 已选择{' '} 126 <a 127 style={{ 128 fontWeight: 600, 129 }} 130 > 131 {selectedRowsState.length} 132 </a>{' '} 133 项 134 135 </div> 136 } 137 > 138 <Button 139 onClick={async () => { 140 141 await handleRemove(selectedRowsState); 142 setSelectedRows([]); 143 144 }} 145 > 146 批量删除 147 </Button> 148 149 </FooterToolbar> 150 )} 151 <CreateForm 152 done={true} 153 visible={visible} 154 current={current} 155 onSubmit={handleSubmit} 156 onVisibleChange={setVisible} 157 /> 158 <UpdateForm 159 done={true} 160 updvisible={updvisible} 161 current={current} 162 onSubmit={handleUpdSubmit} 163 onVisibleChange={setUpdvisible} 164 /> 165 166 </PageContainer> 167 ); 168 }; 169 170 export default TableList;
ProTable：表格组件，具体使用参考：https://procomponents.ant.design/components/table/
ProColumns：表格列，注意dataIndex属性对应的大小写问题