蚂蚁设计专业之手提的使用方法

　　介绍

本篇文章给大家分享的是有关蚂蚁设计专业之手提的使用方法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>标签& lt; ProTable>

Pro-Table是阿里蚂蚁设计专业V4版本,在表基础上再封装的一个组件,包含完整的增删改查逻辑,不用复杂的操作,简单几个配置即可实现

 npm配置设置注册https://registry.npm.taobao.org
　　npm我纱- g
　　纱配置设置注册https://registry.npm.taobao.org//进入你准备创建项目的目录
　　纱创建umi我的程序
　　我的程序光盘
　　纱
　　纱线开始
从“进口反应;react";
　　类客户扩展React.Component {
　　
　　呈现(){
　　回报(
　　& lt; div> helloworld
　　); 　　} 　　} 　　出口客户违约;

成功后用下面代码替换

进口{DownOutlined, PlusOutlined} & # 39; @ant-design/图标# 39;;
　　进口{按钮、下拉菜单}& # 39;antd& # 39;;
　　进口的反应,{useRef} & # 39;反应# 39;;
　　进口{PageHeaderWrapper} & # 39; @ant-design/pro-layout& # 39;;
　　进口手提,{ProColumns, ActionType} & # 39; @ant-design/pro-table& # 39;;
　　从& # 39;进口{selectPage}。/服务# 39;;
　　
　　const TableList: React.FC<{}祝辞=()=比;{
　　const actionRef=useRef ();
　　const列:ProColumns []=[
　　{
　　标题:& # 39;客户名称& # 39;//表,头显示的名称
　　dataIndex: & # 39;名字# 39;//列数据在数据项中对应的路径,支持通过数组查询嵌套路径
　　宽度:& # 39;20% & # 39;
　　},
　　{
　　标题:& # 39;经营性质& # 39;,
　　dataIndex: & # 39;自然# 39;
　　过滤器:[//表头的筛选菜单项
　　{文本:& # 39;个人& # 39;,价值:& # 39;个人& # 39;},
　　{文本:& # 39;一般纳税人& # 39;,价值:& # 39;一般纳税人& # 39;},
　　),
　　宽度:& # 39;20% & # 39;
　　},
　　{
　　标题:& # 39;联系人& # 39;,
　　dataIndex: & # 39;主持人# 39;
　　hideInSearch: & # 39;假# 39;//设置搜索栏是否显示
　　},
　　{
　　标题:& # 39;联系电话& # 39;,
　　dataIndex: & # 39; linkPhone& # 39;
　　hideInSearch: & # 39;假# 39;
　　},
　　{
　　标题:& # 39;税号& # 39;,
　　dataIndex: & # 39; taxNumber& # 39;
　　},
　　{
　　标题:& # 39;状态& # 39;,
　　dataIndex: & # 39;状态# 39;
　　valueEnum:{//当前列值的枚举
　　假:{文本:& # 39;禁用& # 39;,状态:& # 39;错误# 39;},//假是后台传的值,文本是页面显示的,地位是antd提供的状态,具体看api
　　事实:{文本:& # 39;启用& # 39;,状态:& # 39;成功# 39;},
　　},
　　},
　　];
　　
　　回报(
　　& lt; PageHeaderWrapper>//布局标签
　　& lt;手提//表格职业组件
　　headerTitle=安檠砀瘛?//表头
　　actionRef={actionRef}//用于触发刷新操作等,看api
　　rowKey=癷d"//表格行关键的取值,可以是字符串或一个函数
　　toolBarRender={(行动,{selectedRows})=比;(
　　& lt;按钮图标={& lt; PlusOutlined/祝辞}类型=皃rimary">从“进口Qs qs";
　　从“进口请求umi-request";
　　
　　const getRandomuserParams=(params:任何)=比;{
　　返回{
　　页大小:params.pageSize,
　　pageIndex: params.current,
　　参数…
　　};
　　};
　　
　　导出selectPage异步函数(参数:任何){
　　console.log (getRandomuserParams (params))
　　const res=请求(& # 39;/服务器/api/基本/basicCustomer selectPageListCopy& # 39;, {
　　方法:& # 39;文章# 39;
　　标题:{
　　& # 39;内容类型# 39;:& # 39;应用程序/x-www-form-urlencoded& # 39;
　　appId: & # 39; 1117664844619845632 & # 39;
　　令牌:& # 39;eyJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1ODYzNDQ2MjcsImlkIjoiNzkxNzA2Y2Q2M2RiM2EwMSIsImV4cCI6MTU4ODkzNjYyNywiaWF0IjoxNTg2MzQ0NjI3fQ.Gtmm-TZHlMFiEV34ncrLryjzNsv07DwnCYsChQcYEWg& # 39;
　　},
　　数据:Qs.stringify (getRandomuserParams (params)),
　　});
　　
　　返回res;
　　}

耙仙杓谱ㄒ抵痔岬氖褂梅椒?

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

耙仙杓谱ㄒ抵痔岬氖褂梅椒?

& # 39;/服务器/api/& # 39;表示以此开头的请求都拦截,pathRewrite表示发送请求时,所省略的

配置完成后访问,

耙仙杓谱ㄒ抵痔岬氖褂梅椒?

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

蚂蚁设计专业之手提的使用方法