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 相关文章推荐
取得父标签
Nov 14 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
vue实现树状表格效果
Dec 29 Vue.js
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
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
Javascript this指针
2009/07/30 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
python3.7.0的安装步骤
2018/08/27 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
拾金不昧的表扬信
2014/01/16 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
大学军训感言600字
2014/02/25 职场文书
校园安全广播稿范文
2014/09/25 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
爱心助学感谢信
2015/01/21 职场文书
小学安全教育主题班会
2015/08/12 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python