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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
SVG描边动画
Feb 23 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
JS class语法糖的深入剖析
Jul 07 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
PHP获取当前执行php文件名的代码
2017/03/02 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
蛋糕店的商业计划书范文
2014/01/27 职场文书
秋季运动会稿件
2014/01/30 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
艺术节主持词
2014/04/02 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
毕业生找工作求职信
2014/08/05 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书