antd pro中ProTable使用时遇到的一些问题，search，toolBar，toolBarRender属性_您的昵称是啥的博客-CSDN博客
antd pro中ProTable使用时遇到的一些问题，search，toolBar，toolBarRender属性
您的昵称是啥
于 2022-12-14 12:14:35 发布
1296
收藏
文章标签：
react.js
前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36816662/article/details/128314287
版权
antd pro
ProTable官方API： ProTable 在 antd 的 Table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd Table 不同的 api。 所以 找不到的可以去antd table找找
#Protable的官方示例，关于request分页current与pageSize参数传递
<ProTable<DataType, Params>
// params 是需要自带的参数
// 这个参数优先级更高，会覆盖查询表单的参数
params={params}
request={async (
// 第一个参数 params 查询表单和 params 参数的结合
// 第一个参数中一定会有 pageSize 和 current ，这两个参数是 antd 的规范
params: T & {
pageSize: number;
current: number;
},
sort,
filter,
) => {
// 这里需要返回一个 Promise,在返回之前你可以进行数据转化
// 如果需要转化参数可以在这里进行修改
const msg = await myQuery({
page: params.current,
pageSize: params.pageSize,
});
return {
data: msg.result,
// success 请返回 true，
// 不然 table 会停止解析数据，即使有数据
success: boolean,
// 不传会使用 data 的长度，如果是分页一定要传
total: number,
};
}}
/>
属性request 为一个异步函数，antd规范要求其传入的第一个参数对象中必须包含current与pageSize,而关于分页的设置 属性pagination 如果不写则有默认缺省格式，并且request中第一个参数中的current与pageSize会同步到pagination，所以这是约定好的。
#import request from 'umi’的基本使用
语法： request(url[, options]) 示例：
request('/api/v1/xxx', {
method: 'get',
params: { id: 1 },
})
ProTable的search，toolBar，toolBarRender属性
search 属性用来配置表格上方的搜索栏（非toolbar），是否显示搜索表单，传入对象时为搜索表单的配置，类型为false | SearchConfig，false时不显示，SearchConfig对象时
toolBar属性透传 ListToolBar 配置项，其中search.SearchProps 为 antd 的 Input.Search 的属性。
toolBarRender属性，渲染工具栏，支持返回一个 dom 数组，会自动增加 margin-right，类型(action) => ReactNode[]，返回的工具栏组件数组即为toolbar属性的action数组，toolbar属性的action中定义的组件会覆盖掉前者
关于StepsForm和Modal配合使用的问题
StepsForm 和 Modal 配合使用时，Modal 取消后表单无法不能回到第一步。后来尝试用 current 参数控制 step，思路是给每个 StepForm 配置 onFinish 参数，中间每个 StepForm 提交时 current + 1，由于是 current 控制 step，所以最后一个 StepForm 提交时 current 置为 0，Modal onCancel 时 current 置为 0；另外还需要自定义 submitter 使之可以返回上一步
您的昵称是啥
微信扫码订阅
UP更新不错过~
关注
关注
点赞
收藏
打赏
知道了
评论
antd pro中ProTable使用时遇到的一些问题，search，toolBar，toolBarRender属性
Protable的官方示例，关于request分页current与pageSize参数传递,import request from 'umi'的基本使用,ProTable的search，toolBar，toolBarRender属性,关于StepsForm和Modal配合使用的问题
复制链接
扫一扫
Pro-Table在保留toolBarRender属性的情况下去掉表格选择框
Jidahan的博客
07-23
2868
options={false}
toolBarRender={() => [
<Alert
style={{ width: '100%', position: 'absolute', left: 0, top: 12 }}
message="当前选择"
type='info'
showIcon
/>
]}
效果图：
Protable 自定义添加搜索栏和toolbar
hero_th的博客
07-16
2634
Code
//自定义搜索栏按钮
search={{
defaultCollapsed: false,
optionRender: (searchConfig, formProps, dom) => [
...dom.reverse(),
<Button key="out">导出</Button>,
],
}}
//自定义添加toolbar按钮
toolBarRender={() => [
<Button key=
参与评论
您还未登录，请先
登录
后发表或查看评论
【Android】顶部导航栏ToolBar设计
最新发布
m0_56047445的博客
03-28
159
①在app目录下创建一个assets文件夹，在assets文件夹下创建fonts文件夹，将相应的字体.ttf文件放在fonts目录下。可以使用它对菜单项进行分组，使一组菜单项共享可用性和可见性等属性。②menu元素必须是该文件的根节点，并且能够包含一个或多个item和group元素。③item是菜单项，用于定义MenuItem，可以嵌套menu元素，以便创建子菜单。④android:showAsAction：指定菜单项的显示方式。②android:icon：菜单项的图标（可选）①menu是菜单项的容器。
ProTable实现自定义查询条件
yuanbo_520的博客
02-22
493
ProTable 自定义查询条件
二次封装 ant-pro table + react-resizable实现表头控制拉拽
weixin_47338877的博客
02-28
1176
二次封装 ant-pro table + react-resizable实现表头控制拉拽
封装了 ant-pro table + react-resizable+form 可拖动表格。 拓展了一些功能，如格式化，支持保存用户表格宽度习惯，接口分页字段配置，可编辑表格等。
1 react-resizable 组件
import './index.less';
import { Resizable } from 'react-resizable';
npm install --save react-r
Ant Design各个组件的使用，实例
fearlessnesszhang的博客
07-14
1605
一、Menu的使用
想要达到的效果，点击左边，随时更新右边表格数据。
import React from 'react';
import {Divider, Form, Modal, Select, Table, Tabs, Button, message, Card} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import
Ant Deign Pro - ProTable - 高级表格 通用打印组件
Free soul
11-01
818
ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。依托于 ProForm 的能力，ProForm 拥有多种形态，可以切换查询表单类型，设置变形成为一个简单的 Form 表单，执行新建等功能。2.ProTable toolBarRender属性中设置打印按钮。所以自己写了个通用打印组件。3.PageContainer中加入组件。
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
热门推荐
无缺的博客
02-25
1万+
先上整体代码：
const beforeSearchSubmit = (par) => {
//par 就是你搜索表单输入的内容
<ProTable
headerTitle="查询表格"
columns={columns}
rowKey="key"
params={
params
beforeSearchSubmit={beforeSearchSubmit}
Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念
weixin_62192841的博客
10-24
4023
初次接触Ant Design Pro脚手架（以下简称antd pro），并且是第一次使用ProComponents的一些组件，对于自己碰到的一些小坑及样式修改比较耗费时间的地方，进行了记录之--ProTable的使用配置及样式调整。
阿里的protable组件的实用汇总!
H5CaiNiao的博客
09-06
1444
renderFormItem : (item,{ type, defaultRender, formItemProps, fieldProps, ...rest },form) => ReactNode 看的出来这个形式最后返回的是节点或者是组件,这个可以支持自定义搜索表头,包括所有antd的所有组件,可以根据不同需求定制。formRef可以用react的 useRef来赋值,就可以获取到表格实例,可以在任何地方调用高级表格的api,注意:api的名字不太一样,可以打印看看。
antd pro protable request请求有数据 页面不渲染或postdata里的data一直是undefined
weixin_45432575的博客
09-07
3987
异常原因
protable的request请求默认的数据格式为
{data: [], pageSize: 10, current: 1, total:28, success: true,}
request请求如果返回的数据格式不是以上形式就会获取不到data，pageSize等提示undefined。因此页面不会正常渲染，使用postdata处理请求返回的data也会报错。
解决方法
request={async (params) => {
const respo
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
DemoAPIpro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd table 不同的 api。Table属性描述类型默认值request一个获得 dataSource 的方法(params?: {pageSize:...
stand-admin-antdpro-demo:适用于Ant Design Pro的CRUD演示
04-07
StandAdmin is CRUD framework work perfectly with Antd Pro. 标准 CRUD 选取控件 多实例 批量操作 异形列表 异形查询 记录复制 多编辑 关联展开 新建初始值 数据转换-新建/编辑 数据转换-查询
antdPro
02-25
在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 ...
FAQ: antd pro/umi 添加区块错误
01-08
虽然按照antd pro/umi官网构建的项目， 执行添加模块操作时： $ umi block add EmptyPage 或 $ umi block add https://github.com/umijs/umi-blocks/tree/master/demo 报出异常类似： × error AssertionError [ERR...
umi-antd-pro::ghost:use umi conventional routing in Ant Design Pro 使用umi约定式路由多Tabs的Ant Design Pro（Antd Pro的实验项目）
05-22
常见问题解答： http ： //pro.ant.design/docs/faq 中国镜像网站： http ： //ant-design-pro.gitee.io 2.0版现已发布！ :party_popper: :party_popper: :party_popper: 宣布Ant Design Pro 2.0.0 翻译招聘 :...
Ant Design Pro 4.5嵌套表格使用，以及string转图标显示（typescript版）
シ❤゛甜虾的个人博客
08-12
1251
https://procomponents.ant.design/components/table?current=1&pageSize=5
Ant design pro-项目探究（5）react基础知识解决页面数据处理
weixin_45229417的博客
03-04
617
前端利用请求参数、界面与数据进行整合，构成前端的展示。对于状态的一些调用，react中拥有useState,useEffect,useRef方式来实现前端状态的利用，了解这些方式的运用，对开发界面化来说提供了非常大的便捷之处
react-react自定义搜索组件主要针对于reactantd表头搜索基于antd进行封装
08-14
针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger
在antdpro框架中图片为什么不能直接写相对路径
02-06
在 Ant Design Pro 中，使用相对路径来引入图片是不被支持的。这是因为 Ant Design Pro 采用了 Webpack 作为构建工具，Webpack 会将所有资源（包括图片）打包到最终的输出文件中。在这种情况下，使用相对路径来引入图片是没有意义的，因为 Webpack 会将图片移动到另一个位置。
为了在 Ant Design Pro 中正确引入图片，你需要使用绝对路径或者使用 Webpack 的特殊语法，例如 `import` 或者 `require`。例如，你可以这样引入图片：
```
import logo from '../assets/logo.png';
// 然后你就可以在代码中使用这个图片了
<img src={logo} alt="logo" />
```
此外，你也可以使用 `require` 语法来引入图片：
```
const logo = require('../assets/logo.png');
// 然后你就可以在代码中使用这个图片了
<img src={logo} alt="logo" />
```
希望这能帮到你！
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
您的昵称是啥
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
11
原创
36万+
周排名
11万+
总排名
3953
访问
等级
128
积分
粉丝
获赞
评论
收藏
私信
关注
热门文章
antd pro中ProTable使用时遇到的一些问题，search，toolBar，toolBarRender属性
1290
java.lang.NoSuchMethodError: 报错，maven+ssm无法访问到webapp下的静态资源问题解决
620
在安装dahdi与Asterisk时遇到的一些问题
439
UmiJS的统一异常处理处理
391
Jekyll（一）.使用Jekyll+Github Pages搭建自己的博客
300
分类专栏
Jekyll自建博客
5篇
最新评论
java.lang.NoSuchMethodError: 报错，maven+ssm无法访问到webapp下的静态资源问题解决
krxst:
还是网上大佬多 我用的5.3.20找了一两个小时错误找不到 气疯了，终于解决了
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Jekyll（五）. jekyll-theme-chirpy主题常用基础配置及侧边导航栏联系方式修改
Jekyll（四）. 常用变量
Jekyll（三）. 头信息
2022年8篇
2021年2篇
2020年1篇
目录
目录
分类专栏
Jekyll自建博客
5篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
您的昵称是啥
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值