AntDesignPro之ProTable使⽤操作
标签<ProTable>
Pro-Table 是阿⾥Ant Design Pro V4版本，在Table基础上再封装的⼀个组件，包含完整的增删改查逻辑，不⽤复杂的操作，简单⼏个配置即可实现官⽹Api地址
⽰例
V4版本刚出不久，⽹上的教程还⽐较少，踩了不少坑，把⾃⼰学习过程分享出来，希望可以帮到你
创建项⽬（需要node.js及npm环境）
npm config set registry registry.
npm i yarn -g
yarn config set registry registry.
//进⼊你准备创建项⽬的⽬录
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',
hideInSearch : 'false',
},
{
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>
mockplus是干嘛的
批量操作 <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: 'JuYmYiOjE1ODYzNDQ2MjcsImlkIjoiNzkxNzA2Y2Q2M2RiM2EwMSIsImV4cCI6MTU4ODkzNjYyNywiaWF0IjoxNTg2MzQ0NjI3fQ.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: '是否过期',
dataIndex: 'overdue',
key: 'overdue',
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: '是否过期',
dataIndex: 'overdue',
key: 'overdue',
valueEnum: datas
}
这样就可以使⽤了啊~
以上这篇Ant Design Pro 之 ProTable使⽤操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。