Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念_antdpro集成的protable组件_Ara_tsubomi的博客-CSDN博客
Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念
Ara_tsubomi
已于 2022-10-24 16:50:46 修改
3496
收藏
文章标签：
前端
1024程序员节
react
于 2022-10-24 16:38:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62192841/article/details/127443186
版权
目录
前言：碎碎念
Columns配置
ProTable的配置
关于样式调整
前言：碎碎念
由于近期才接触到Ant Design Pro脚手架（以下简称antd pro），并且是第一次使用ProComponents的一些组件，对于自己碰到的一些小坑及样式修改比较耗费时间的地方，进行了记录。本文先说ProTable - 高级表格组件。如果你也对于ProTable 有在苦恼的问题的话，就请看下去吧。
注：使用的脚手架版本是@ant-design/pro-cli ：umi@3 + simple + TypeScript。
对于中后台项目，首当其冲用到最多的就是表格了。不得不说，antd pro的表格组件是真的好用，不用自己写查询表单，不需要各个组件来回传值，麻烦且耗时。ProTable组件都给封装好了，查询表单、以及一般情况下会用到的筛选及排序功能，都给做好了，只需要进行配置就可以了。一个组件，百来行代码，就可以搞定一个很完美的表格页面。但是封装的功能越多，层级越深，就会发现配置的时候越不容易找到。(T_T) 
Columns配置
先说Columns的一些常用配置吧：
属性描述用法或例子valueEnum值的枚举；对于一些行状态（如：是否启用，后端返回true或false，或数字时）或者无法返回直接展示在表格中的内容，可以使用值的枚举，并且可以配合status字段展示更明显的状态。 valueEnum: {         0: { text: '正常', status: 'Processing'},         1: { text: '下线', status: 'Default' },         2: { text: '拉黑', status: 'Error' },   } 注：这里Processing首字母需要大写哦。 request从服务器请求枚举 request 是一个 promise,需要返回一个与 options 相同的数据 valueType上方查询表单可以根据 valueType 来生成不同的表单类型；包括很多种，就不一一列举了，还可以自定义，可以查看官网通用配置 valueType: 'index',  序列号； valueType: 'indexBorder',  圆圈圈序列号； valueType: 'select',  下拉框； valueType: 'date',  日期选择框... renderFormItem渲染查询表单的输入组件；当valueType支持的表单类型不能满足需要时，可以通过renderFormItem自定义需要渲染的表单项及值 renderFormItem: () => {         return <Cascader name="address" />; }, fieldProps 查询表单的 props，会透传给表单项，支持表单项（ant design中）的所有props。 （这个配置项里可以写传给渲染的组件的 props，几乎所有的pro组件中都可以用这个配置来写antd对应组件中的配置） 例：查询表单input本身默认的占位字为“请输入”，如果想改的话，可以在columns的配置中： fieldProps: {         placeholder: '请输入名称',  }, key在table中显示的字段和搜索的字段不同时，可以将key设置为搜索的字段{       title: "始发地址",       dataIndex: 'address',       key: 'startAddr', }renderText类似 table 的 render，但是必须返回 string，如果只是简单地转化枚举，可以使用上面的 valueEnum，如果后端返回的数据需要复杂处理，也可以和valueEnum一起使用 例：此列的展示依赖到两个字段，需要复杂判断，可以先用renderText返回，再用valueEnum进行映射显示内容； renderText: (_, record) =>record.routeDetail.serviceType,  valueEnum: {         1: { text: '专车' },         2: { text: '班车' },         3: { text: '拼车' },         4: { text: '回程空仓' },  } render 类似 table 的 render，第一个参数变成了 dom,增加了第四个参数 action；和renderText最大的区别除了参数text是个dom，就是renderText需要返回一个字符串string类型，而render支持返回一个ReactNode 或 ReactNode[ ]（操作列的各种操作按钮一般就用render来返回一个数组） (text: ReactNode,record: T,index: number,action: UseFetchDataAction<T>) => ReactNode | ReactNode[] render: (_, records) => [     <Link key="edit" to={ '/route/edit/id' }>        编辑</Link>,           <a key="del" >删除</a>   ], hideInSearch在查询表单中不展示此项 hideInSearch: true, hideInTable在表格中不展示此列 hideInTable: true, filters当值为true时，会自动根据此项的 valueEnum生成下拉筛选菜单filters: true,onFilter如果需要网络筛选，需要关闭本地筛选才可以 onFilter: false, sorter排序：如果要前端做排序，则在这里直接写排序规则；如果要后端排序，则在这里开启即可，然后在ProTable的request中可以接收到对应属性 前端排序： sorter: (a, b) => a. time - b.time， 后端排序： sorter：true， width 限定列宽，值可以是number（单位是px）；可以是string（用来写百分比宽） width: '10%', width: 143, ellipsis  是否自动缩略，显示... ellipsis: true, 
ProTable的配置
另外就是ProTable的一些配置了：
request：request算是 ProTable 最重要的 API了吧，可以在request中发异步请求获取表格数据。有三个参数：params（是参数 params 查询表单和 params 参数的结合），sort（如果有在columns中开启后端排序的，则会接收到参数），filter（如果功能中有筛选的话，包含了设置filter为true的参数及值）。对于数据返回格式有要求：需要返回一个对象，对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。 rowKey：一定要写的属性（不写会报错），可以直接写字符串rowKey="id"，这里的“id”就是request中返回数据的唯一值。 options：表格右上角的工具栏菜单配置，就是那一堆刷新密度啥的，默认是都会显示的，如果不想让其中一个展示则把那一项改成false：options={{ reload: false }}；如果都不想让显示的话，直接设为false即可：options={false}。 toolBarRender：表格右上角的设置，可以使用toolBarRender来自定义，在options左边设置想要展示的“新增”按钮等，具体写法可参考官网。 search：可以传布尔值来控制是否显示搜索表单，传入对象时为搜索表单的配置，具体搜索表单的配置官网有写，下面列举几个我用到的： search={{
labelWidth: 90, /*标签的宽度，默认为80*/
span: 10, /*配置查询表单的列数：如果想两列展示的话，数值就需要9或10即可（>8即可）*/
collapsed: false, /*是否收起：false为不收起*/
collapseRender: () => null, /*收起按钮的 render：按钮都显示出来，没有收起展开*/
optionRender: (searchConfig, formProps, dom) => [...dom], /*自定义操作栏*/
}} pagination：如果想自定义分页器，可以直接在这个属性中写个对象设置相关属性即可： pagination={{
pageSize: 10, /*每页条数：如果不配置的话，默认是每页20条显示*/
current: 1,
showTotal: (total) => `共${total}条`, /*总条数的展示*/
}}
关于样式调整
如果你有仔细看了上面的配置，就会发现有些已经可能用不到的样式被替换掉或者隐藏了，比如：
搜索表单中的展开和收起，通过search配置的collapsed属性，已经删掉了；搜索表单的表单项展示列数，通过search配置的span可以控制，如果想要移动搜索和重置按钮位置，可以通过找到对应的类名，对这两个按钮进行定位（不过需要耐心找类名，我找了大半天才找到让两个按钮定位生效的类名）；表格列宽通过columns中的width控制、列宽不够时是否显示省略号通过ellipsis控制；分页器的显示，通过给ProTable配置pagination属性，即可以自定义分页器。
......其他的暂时想不起来了，等想起来了再补充吧。
以上都是我初次使用ProTable中遇到的问题和相关配置，如果有不对的地方或者对于业务处理有更好的方式的话，也请不吝赐教，谢谢！
Ara_tsubomi
关注
关注
点赞
收藏
打赏
知道了
评论
Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念
​初次接触Ant Design Pro脚手架（以下简称antd pro），并且是第一次使用ProComponents的一些组件，对于自己碰到的一些小坑及样式修改比较耗费时间的地方，进行了记录之--ProTable的使用配置及样式调整。
复制链接
扫一扫
Ant Design Pro 之 ProTable使用操作
01-21
标签
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 h
antd vue修改分页_ant-design-vue Table组件和分页组件的自定义
weixin_39528467的博客
12-19
2570
最近在个新项目里开发CMS端，vue技术栈和antd的UI框架表格table使用链接：antd的table分页pagination使用链接：antd的pagination表格单独使用时，自带简单分页，只包含 上一页, 页面码, 下一页,例如：但是有时候产品和甲方的需求很奇葩，非得可选的pageSize，显示总数等功能，文档里有时候也阐述不全，甚至不对，关键时候还要靠自己动动脑子，看代码：//tem...
参与评论
您还未登录，请先
登录
后发表或查看评论
ele-admin产品的ele-pro-table在第一次正常加载数据，第二次返回错误时仍然显示第一次数据的问题。
最新发布
zongmaomx的博客
02-20
218
问题出现在，比如用户加载第一页返回了正常的十条数据，但是在加载第二页的时候报错了，我们返回了一条错误信息，这个时候希望页面上显示的是错误信息。但实际情况是页面上显示的任然是第一页的数据，没有任何报错。反过来却不会出现问题。于是猜想，应该是当后续出现报错的时候，组件没有清空第一页的data，所以表格也就没更新。于是找到ele-admin组件依赖中相关的代码，在报错的时候及时清空tableData即可。当初始化第一次返回正常的数据数组或者报错信息，页面上都能正常显示。
react项目 ant design框架[需求] ProTable::options::setting 增加持久化支持
Pandora_417的博客
07-15
672
react项目 ant design框架[需求] ProTable::options::setting 增加持久化支持
columnsStateMap:设置columns
onColumnsStateChange: 监听columns的变化
columnsStateMapcolumns 的状态枚举{key:{ show,fixed }}}
onColumnsStateChangecolumns 状态发生改变(props: {key:{ show,fixed }}}) => void
Ant Design Pro(5)-7.高级表格ProTable
AG.『Feng』的博客
11-16
2832
Ant Design Pro(5)-7.高级表格ProTable的使用
antd react ProTable 基本使用
powerFulCat的博客
01-05
2181
antd react protable 安装, 使用, 基本操作
ProTable自定义翻页写法
winddowes的博客
03-25
1991
ProTable自定义翻页写法
ProTalbe中正常翻页默认20页。自定义翻页写法如下：
1.定义参数
const queryParams = {
pageIndex: 1, //定义当前页
pageSize: 10 //定义每页的条数
2.在useEffect中传参
useEffect(() => {
queryParams.pageIndex = 1;
queryParams.pageSize = 10;
},[ ] )
3.在pag
antd-protable的分页逻辑封装
曲鸟
12-13
1203
封装删除方法，在删除的数据不是第一页且是最后一条数据时则修改current//在非首页的最后一条数据被删除时，改变页码为前一页进行请求 setHandlePagination({});};
antd protable
前端小白成长记
01-17
4474
1、想要实现外部传递进来的参数，每次参数变化，重新请求接口
useEffect(async () => {
if (props?.values?.orgCode) {
if (actionRef.current) {
actionRef.current.reload();
}, [props?.values?.orgCode, props?.values?.busiPolicyCode]);
<P
ProTable中切换分页不生效
酒沁的博客
11-21
389
解决ProTable中切换分页不生效问题
Ant Design Pro学习记录—ProTable的使用（一）
岁月佳醉的博客
07-28
5368
ProTable数据请求、检索、翻页，valueType的使用，时间范围dateRange检索，自定义图片点击预览
antd-pro中的protable组件中，从接口获取搜索条件
u011341849的博客
02-01
317
antd-pro中的protable组件中，从接口获取搜索条件。
ant-design-vue-pro-master.zip
08-20
ant-design-vue-pro-master之前版本的源码，该版本支持多页签，实现页面页签显示，返回不刷新。新版本代码改动较大，此版本慎用，可参考多页签的实现方式；
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face:
Ant Design的深色主题。
仍处于实验阶段，欢迎尝试并帮助我们进行改进。
访问进行预览。
安装
$ npm install @ant-design/dark-theme
用法
import darkTheme from '@ant-design/dark-theme' ;
// webpack.config.js: less-loader
loader : 'less-loader' ,
options : {
modifyVars : darkTheme ,
} ,
} ,
在Ant Design Pro中使用： :
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English |
蚂蚁设计Vue Pro
适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于
预览： ：
主页： ：
文档： :
变更日志： :
常见问题解答： ：
总览
环境和依赖
节点
网络包
埃斯林特
@ vue / cli〜3
-Vue的蚂蚁设计
图片编辑
-AntV G2
Viser -Vue的Antv / G2
注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm
项目设置
克隆回购
git clone https://github.com/vueComponent/ant-
vue3 ant table组件二次封装
我是vip你是谁的博客
07-04
905
vue3 ant table组件二次封装
用vue3和antd3二次封装table和分页器组件
mp1278139217的博客
04-15
2454
项目场景：
如题：
我是一只刚入行不久的程序员新人，因为公司新项目要用vue3和antd3，而且要我封装一个公共的table组件，也是查了很多资料，配合自己的修改写出来了，因为刚写出来，可能会有一些冗余代码，大家用的时候可以结合自己做一些修改。
因为是新人写的有点乱…见谅
直接上代码
子组件代码
<template>
<div class="tablePaganations">
<!-- 表格 -->
<a-table
:data-
1.安装vue3+typeScript+antd环境
echo_Ae的博客
07-27
341
1.nprogress它是一个导航栏跳转的进度条2.它是一个UI组件库3.vue-i18n它是一个国际化的语言切换库4.它是webpack的一个运行时动态主题颜色替换插件5.其他常见的1.使用npminstall-g@vue/cli安装vue环境2.使用vuereactevue3创建项目3.使用npminstall安装依赖4.介绍项目需要的全部依赖包httpshttpshttpshttpshttpshttpshttpshttpshttpshttps。......
ElementUI表格el-table改表头样式,el-table改样式
qq_51055690的博客
05-31
3430
饿了么elementUI改表格样式,改表格表头样式
antd pro protable request请求有数据 页面不渲染或postdata里的data一直是undefined
weixin_45432575的博客
09-07
3804
异常原因
protable的request请求默认的数据格式为
{data: [], pageSize: 10, current: 1, total:28, success: true,}
request请求如果返回的数据格式不是以上形式就会获取不到data，pageSize等提示undefined。因此页面不会正常渲染，使用postdata处理请求返回的data也会报错。
解决方法
request={async (params) => {
const respo
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
Ara_tsubomi
CSDN认证博客专家
CSDN认证企业博客
码龄2年
暂无认证
原创
148万+
周排名
16万+
总排名
9296
访问
等级
54
积分
粉丝
10
获赞
评论
16
收藏
私信
关注
热门文章
Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念
3472
Ant Design Pro使用之--EditableProTable 可编辑表格
2911
umi插件useRequest基本使用
2294
Ant Design Pro中access权限控制--进入项目后默认展示有权限的第一个菜单页面（项目没有公共页面）
552
最新评论
Ant Design Pro使用之--EditableProTable 可编辑表格
一只小蜗 - lu:
可编辑表格，设置了readOnly的列，也就是这一列不可编辑，但会出现一个问题，就是本来这列是可以搜索的，search： true, 反因为设置了readOnly,不可搜索了，博主有遇到这种问题吗？
Ant Design Pro使用之--EditableProTable 可编辑表格
duni_14:
一样的
Ant Design Pro使用之--EditableProTable 可编辑表格
Ara_tsubomi:
我就是和proTable一样的方法获取的数据，是可以的，你那边会有什么报错吗？
Ant Design Pro使用之--EditableProTable 可编辑表格
哥斯拉打代码。:
你好，EditableProTable怎么使用request获取数据啊，和protable不一样
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Ant Design Pro使用之--EditableProTable 可编辑表格
Ant Design Pro中access权限控制--进入项目后默认展示有权限的第一个菜单页面（项目没有公共页面）
umi插件useRequest基本使用
2022年4篇
目录
目录
最新文章
Ant Design Pro使用之--EditableProTable 可编辑表格
Ant Design Pro中access权限控制--进入项目后默认展示有权限的第一个菜单页面（项目没有公共页面）
umi插件useRequest基本使用
2022年4篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
Ara_tsubomi
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值