Ant Design Pro 之 ProTable使用操作


Posted in Javascript onOctober 31, 2020

标签<ProTable>

Ant Design Pro 之 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

创建项目完成后如图

Ant Design Pro 之 ProTable使用操作

登录后如图

Ant Design Pro 之 ProTable使用操作

添加菜单

V4版本目录结构有一些改变,影响不大,按步骤创建就行了

Ant Design Pro 之 ProTable使用操作

完成后,在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;
}

Ant Design Pro 之 ProTable使用操作

前后端分离会有跨域问题出现,这里在proxy里配置代理解决

Ant Design Pro 之 ProTable使用操作

'/server/api/'表示以此开头的请求都拦截,pathRewrite表示发送请求时,所省略的

配置完成后访问,

Ant Design Pro 之 ProTable使用操作

可以看到已经成功了,包括分页,以及表头筛选,条件查询都是可以用的,新增删除还没有写,等后面再补充吧!

补充知识: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使用操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
react ant Design手动设置表单的值操作
Oct 31 #Javascript
解决pycharm双击但是无法打开的情况
Oct 31 #Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 #Javascript
antd design table更改某行数据的样式操作
Oct 31 #Javascript
antd配置config-overrides.js文件的操作
Oct 31 #Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 #Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
Js获取事件对象代码
2010/08/05 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python文件写入实例分析
2015/04/08 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
Java程序员综合测试题
2014/04/25 面试题
工程管理专业毕业生自荐信
2014/01/24 职场文书
趣味运动会活动方案
2014/02/12 职场文书
土地转让协议书
2014/09/27 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
python实现自动化群控的步骤
2021/04/11 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript