Ant Design Pro 之 ProTable使用操作_vue.js_脚本之家
脚本之家
服务器常用软件
手机版
投稿中心
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
PHP
ASP.NET
ASP
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
网络编程
脚本专栏
脚本下载
数据库
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
YUI.Ext相关
prototype
jquery
AngularJS
json
lib_js
js面向对象
extjs
Mootools
Seajs
dojo
vue.js
backbone.js
React
其它
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Ant_Design_Pro ProTable
Ant Design Pro 之 ProTable使用操作
更新时间：2020年10月31日 12:05:23 作者：搬砖的伤脊椎
这篇文章主要介绍了Ant Design Pro 之 ProTable使用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
标签<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',
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>
批量操作 <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: '是否过期',
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使用操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Ant-design-vue Table组件customRow属性的使用说明Antd-vue Table组件添加Click事件,实现点击某行数据教程ant desing vue table 实现可伸缩列的完整例子Vue3 table表格组件的使用如何使用ant-design-vue的Table组件
Ant
Design
Pro
ProTable
相关文章
Vue底层实现原理总结小编给大家整理Vue底层实现原理的知识点总结，如果大家对此有需要，可以学习参考下，希望我们整理的内容能够帮助到你。 2018-02-02
详解vue 不同环境配置不同的打包命令这篇文章主要介绍了详解vue不同环境配置不同的打包命令，主要包括正式环境、测试环境和开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2019-04-04
vue中的严格模式如何取消这篇文章主要介绍了vue中的严格模式如何取消，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 2022-04-04
vue开发环境配置跨域的方法步骤本文介绍了使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2019-01-01
Vue3.x项目开发的一些常用知识点总结目前Vue3.0是会兼容大部分2.x的语法,下面这篇文章主要给大家介绍了关于Vue3.x项目开发的一些常用知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下 2022-05-05
vue基于Echarts的拖拽数据可视化功能实现这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2020-12-12
基于vue-ssr的静态网站生成器VuePress 初体验VuePress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对seo非常友好。这篇文章主要介绍了基于vue-ssr的静态网站生成器VuePress 初体验,需要的朋友可以参考下 2018-04-04
vue webpack重写cookie路径的方法webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下 2019-07-07
浅谈Vue SSR中的Bundle的具有使用这篇文章主要介绍了浅谈Vue SSR中的Bundle的具有使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 2019-11-11
vue-cli脚手架config目录下index.js配置文件的方法下面小编就为大家分享一篇vue-cli脚手架config目录下index.js配置文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 2018-03-03
最新评论
大家感兴趣的内容
1vue引用js文件的多种方式(推荐)2vue跳转页面的几种方法(推荐)3详解vue 路由跳转四种方式 (带参数)4vue项目刷新当前页面的三种方法5vue之父子组件间通信实例讲解(props、$ref、$em6Vue props用法详解(小结)7vue.js中created方法作用8element-ui中select组件绑定值改变,触发cha9vue实现文件上传功能10VUE元素的隐藏和显示（v-show指令)
最近更新的内容
vue,angular,avalon这三种MVVM框架优缺点VeeValidate在vue项目里表单校验应用案例Vue+Openlayer批量设置闪烁点的实现代码(基于postrendervue的过滤器filter实例详解在VUE中使用lodash的debounce和throttle操作Mint UI实现A-Z字母排序的城市选择列表Vue之组件的自定义事件详解利用vscode编写vue的简单配置详解FastApi+Vue+LayUI实现前后端分离的示例代码vue将毫秒数转化为正常日期格式的实例
常用在线小工具
微信
投稿
脚本任务
在线工具
关注微信公众号
关于我们 -
广告合作 -
联系我们 -
免责声明 -
网站地图 -
投诉建议 -
在线投稿
CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有