Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件_ant design protable搜索_叫我虫虫吧的博客-CSDN博客
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
叫我虫虫吧
已于 2022-07-28 18:00:01 修改
10756
收藏
15
分类专栏：
Ant Design Pro
文章标签：
elementui
vue.js
javascript
于 2022-02-25 15:42:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40319394/article/details/123134106
版权
Ant Design Pro
专栏收录该内容
7 篇文章
5 订阅
订阅专栏
先上整体代码：
const beforeSearchSubmit = (par) => {
//par 就是你搜索表单输入的内容
<ProTable
headerTitle="查询表格"
columns={columns}
rowKey="key"
params={
params
beforeSearchSubmit={beforeSearchSubmit}
search={{
labelWidth: 100,
span: 12,
optionRender: ({searchText, resetText}, {form}, dom) => [
<Button type="primary">check</Button>,
<Button type="primary">Normal</Button>,
<Button
key="searchText"
type="primary"
onClick={() => {
// console.log(params);
form?.submit();
}}
{searchText}
</Button>,
<Button
key="resetText"
onClick={() => {
form?.resetFields();
}}
{resetText}
</Button>
}}
request={(params) => {
return getStorageAPI(params,searchParams)
}}
/>
关于搜索菜单的内容，主要关注ProTable身上的以下两个属性
search
beforeSearchSubmit
1.search对象
（1）optionRender : 自定义搜索操作栏
searchText, resetText对应组件自身提供的搜索和重置按钮，我需要在这两个按钮前面加上自己的其他操作，比如搜索类型等等，效果如下图：
 2.beforeSearchSubmit
自定义搜索操作事件来了 proTable 默认是把搜索框的内容直接放到了表格的 params 里面的，有些时候我们的搜索字段可能需要更改，或者后台需要的数据格式比较特殊，这个时候我们就可以在这里做操作了
注意 如果你配置了该方法，那么查询事件就会失效，你可以在这个方法里通过更新 params的方式来实现更新表格
 另外 如果想更改搜索表单的key，在colums里的formItemProps属性可以实现，代码如下：
const columnsData = [
title: 'pool',
dataIndex: 'pool',
valueType: 'textarea',
ellipsis: true,
copyable: true,
tip: '标题过长会自动收缩',
formItemProps: {label: 'xxxx'}, //修改查询表单的label值
感觉有用给个赞吧~
叫我虫虫吧
微信扫码订阅
UP更新不错过~
关注
关注
12
点赞
15
收藏
打赏
知道了
评论
Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件
先上整体代码：const beforeSearchSubmit = (par) => { //par 就是你搜索表单输入的内容} <ProTable headerTitle="查询表格" columns={columns} rowKey="key" params={ params } beforeSearchSubmit={beforeSearchSubmit}
复制链接
扫一扫
专栏目录
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
浅谈Ant Design Pro 菜单自定义 icon
01-18
Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon
由于 umi 的限制，在 router.config.js 是不能直接只是用组件的，Pro 中暂时支持 使用 ant.design 本身的 icon type，和传入一个 img 的 url。只需要直接在 icon 属性上配置即可，如果是个 url，Pro 会自动处理为一个 img 标签。
如果这样还不能满足需求，可以自定义 getIcon 方法。
如果你想使用 iconfont 的图标，你可以使用ant.desgin的自定义图标.
1. getIcon方法
/* eslint no-useless-escape:0
参与评论
您还未登录，请先
登录
后发表或查看评论
antdesignpro ProTable 搜索模式自定义搜索字段
热门推荐
qq_23064501的博客
11-12
1万+
const [params, setParams] = useState({})
const handleChange = (value) => {
setParams({ "device_id": value })
console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
title: '设备',
dataIndex: 'devi...
ProTable实现自定义查询条件
最新发布
yuanbo_520的博客
02-22
220
ProTable 自定义查询条件
ant design实现表格查询
qq_43600588的博客
07-10
2559
ant design实现表格查询简介表格查询功能简介为什么踩坑了？代码实现注
简介
本文章主要是讲述本小白在实现查询表格的过程中的种种困难，最后终于实现了这个巨简单的功能，俺真的太难了！！！
表格查询功能简介
表格中有多条信息，通过搜索功能筛选出特定的某一条（或几条）信息，显示再表格中。
为什么踩坑了？
一开始我是将查询到的数据直接赋值给data，然后发现控制台一直在报错，大概内容是：data没有splice方法啥的，记不清了哈哈哈，后面无意中百度才发现给data赋值的时候必须要数组，否则就实现不了这个功能
antdesignpro ProTable 搜索模式自定义下拉框远程搜索
qq_23064501的博客
11-12
3906
title: '设备',
dataIndex: 'device_id',
hideInTable: true,
hideInForm: true,
renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
const options = alllist.map(item => <Option key={item.id}>{item..
Ant Design Pro(5)-7.高级表格ProTable
AG.『Feng』的博客
11-16
2832
Ant Design Pro(5)-7.高级表格ProTable的使用
ProTable 自定义查询表单项 -- 树结构（SelectTree）
小子宝丁的博客
09-27
3156
示例 ProTable 自定义查询表单项的方法，以树形为例。以解决官方提供的valueType 不够用时的尴尬。
Antd中Table列表行默认包含修改及删除功能的封装
曲鸟
11-29
2680
ant-design是非常不错、方便的一款前端组件库，而这次用到的ProComponents则是在 Ant Design 上进行了自己的封装，更加易用，与 Ant Design 设计体系一脉相承，无缝对接 antd 项目，样式风格与 antd 一脉相承，无需魔改，浑然天成。一些预设行为也达到了更少的代码，更少的 Bug的目的。
react protable ant设置表单查询条件
weixin_39818813的博客
07-18
874
从a页面跳转到b页面，路由携带了参数，并且将参数作为b页面的查询条件，同时b页面对应的搜索表单也需要根据查询值来选中。设置initialValue在静态的情况下没问题，但动态设置时不生效。
antd pro中ProTable使用时遇到的一些问题，search，toolBar，toolBarRender属性
qq_36816662的博客
12-14
927
Protable的官方示例，关于request分页current与pageSize参数传递,import request from 'umi'的基本使用,ProTable的search，toolBar，toolBarRender属性,关于StepsForm和Modal配合使用的问题
antdesign 高级表单 自定义columns 搜索
Embrace924的博客
12-31
863
const [start, setStart] = useState<Moment | null>();
const [end, setEnd] = useState<Moment | null>();
title: '时间',
ellipsis: true,
align: 'center',
valueType: 'dateRange',
width: 180,
dataIndex:...
pro-table自定义搜索栏与antd design对话框的搭配使用
weixin_46756077的博客
12-16
1167
对pro-table与antd使用的思量
AntDesign中ProTable的运用
Kristen的博客
05-19
1792
AntDesign中ProTable的运用
ProTable的基础运用可见：Ant Design Pro Component官方文档
在此基础上，Ant Design中的Table属性有一部分在ProTable中也是可以复用的
例如column下的一系列api可以直接进行复用
形如：
const columns = [
title: '序号',
dataIndex: 'index',
valueType: 'index',
align: 'cen
Ant Design ProTable 搜索框设置默认值
清风明月的博客
04-14
5006
最近遇到一个需求，需要在ProTable搜索框的时间周期设置默认开始时间和结束时间，并调用接口返回数据显示。
实现思路：
创建formRef来设置ProTable里面搜索的默认值；
通过moment来获取当前月的第一天和最后一天；
通过formRef.current?.setFieldsValue赋值给created_at；
通过formRef.current.submit()调用接口，渲染页面；
实现该需求的必要代码：
import React, { useState, useEffect, useR
Protable 自定义添加搜索栏和toolbar
hero_th的博客
07-16
2526
Code
//自定义搜索栏按钮
search={{
defaultCollapsed: false,
optionRender: (searchConfig, formProps, dom) => [
...dom.reverse(),
<Button key="out">导出</Button>,
],
}}
//自定义添加toolbar按钮
toolBarRender={() => [
<Button key=
antd-pro中的protable组件中，从接口获取搜索条件
u011341849的博客
02-01
317
antd-pro中的protable组件中，从接口获取搜索条件。
antdPro - ProTable 实现两个选择框联动效果
名人卷耶
06-08
1525
antdPro实现选择框联动效果
Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念
weixin_62192841的博客
10-24
3496
初次接触Ant Design Pro脚手架（以下简称antd pro），并且是第一次使用ProComponents的一些组件，对于自己碰到的一些小坑及样式修改比较耗费时间的地方，进行了记录之--ProTable的使用配置及样式调整。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
叫我虫虫吧
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
58
原创
5万+
周排名
3万+
总排名
36万+
访问
等级
2492
积分
19
粉丝
128
获赞
99
评论
226
收藏
私信
关注
热门文章
使用layui 渲染table数据表格
81085
layui 给数据表格加序号
52951
layui 表单回显数据，修改table表格数据
37372
css 背景色铺满全屏幕
16476
G6自定义节点
14865
分类专栏
数据库系统原理
1篇
C++
1篇
Ant Design Pro
7篇
G6
1篇
antd系列
3篇
mysql
1篇
css3
2篇
css
2篇
可视化
Dva
2篇
ES6
1篇
Element-Ui
1篇
vue
2篇
react 问题记录
14篇
JavaScript
23篇
最新评论
antd design pro v5 ProTable 列表工具栏操作
qq_38969618:
我也遇到相同问题。我用的是antPro6, 我的解决是：如果持久化配置，就不要写这个onchange这个配置了，如果想第一次没有持久化状态配置时给默认配置，直接配置defaultValue字段即可。
js 查找树种某一条数据 最深层的子数据（递归获取指定某一条数据）
Mr.佑先生:
递归判断的时候，是单独写了个isArray方法吗？
antd design pro v5 ProTable 列表工具栏操作
EJ_hang:
handleOnChangeColumn,我调用这个方法会掉进死循环，主要是执行 setColumnsStateMap(map) 的时候，不知道你有没有遇到，怎么解决呢
G6自定义节点
weixin_48224180:
这个怎么控制文字超出显示省略号呀
解决window10下 bash: json-server: command not found
Mhbfy.:
C:\Program Files\nodejs\node_cache 这个路径是什么
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
C++ const与指针共同使用
C++ 引用
SQL学习常用命令
2022年11篇
2021年6篇
2020年20篇
2019年14篇
2018年9篇
目录
目录
分类专栏
数据库系统原理
1篇
C++
1篇
Ant Design Pro
7篇
G6
1篇
antd系列
3篇
mysql
1篇
css3
2篇
css
2篇
可视化
Dva
2篇
ES6
1篇
Element-Ui
1篇
vue
2篇
react 问题记录
14篇
JavaScript
23篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
叫我虫虫吧
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值