Ant Design Pro 之 ProTable使用操作

标签<protable>

pro-table 是阿里ant design pro v4版本，在table基础上再封装的一个组件，包含完整的增删改查逻辑，不用复杂的操作，简单几个配置即可实现

官网api地址

示例

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使用操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。