Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件

先上整体代码：

const beforeSearchSubmit = (par) => {//par 就是你搜索表单输入的内容
}<ProTableheaderTitle="查询表格"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>,<Buttonkey="searchText"type="primary"onClick={() => {// console.log(params);form?.submit();}}>{searchText}</Button>,<Buttonkey="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值}
]

感觉有用给个赞吧~

Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件相关推荐

Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标
Ant Design Pro 使用iconfont上的图标有两种方法: 1.加载在线图标创建一个项目(图标的前缀一定要设置为:icon-) 创建远程连接复制代码,找到ant design pro项 ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
ant design pro侧边栏子菜单添加不成功的解决办法
项目场景: Ant design pro侧边栏添加子菜单问题描述: 在企业工作中 Ant design pro侧边栏添加子菜单如果不成功要检查以下几个部分原因分析: 刚进公司的新员工如果接触到新的 ...
为什么我选择Ant Design Pro脚手架
为什么我选择Ant Design Pro脚手架首先先来谈谈Ant Design Pro脚手架好处: 初始化操作简单! 启动脚手架方便! 任何一种语言和框架,满足以上两点,肯定会得到很好的推广(比较大 ...
Ant Design Pro 菜单自定义 icon
Ant Design Pro 官方文档说明在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持使用 ant.des ...
ant design pro vue左侧菜单自定义图标
做ant design pro vue项目的时候突然想修改左侧菜单的图标,在修改途中发现源码中提供的方法方法居然不生效(如下所示) 在src/assets/icons文件夹中下载svg图标在src/ ...
ant design pro v4 从后台服务器请求菜单，思路，具体代码及坑
原文见:https://www.yuque.com/asuncat/htn2dd/wgnx0u 版本信息 ant design pro : v4.2.2 umi: v3.2.14 pro-layout ...

Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件

1.search对象

2.beforeSearchSubmit

Ant Design Pro ProTable 自定义搜索菜单操作栏和搜索事件相关推荐

最新文章

热门文章