ProTable search form表单属性用法详解 - 爱码网
首页
前端技术
编程语言
人工智能
运维知识
资源下载
常用小工具
技术问答
ProTable search form表单属性用法详解
2022-03-07
Protable自带表单筛选,一般场景适用.
也提供了一些api,方便不同场景使用.这里列出几种常用的属性
api:
1. labelWidth form表单label的宽度,可以是number或者'auto'.默认是80px,实际使用设置为auto更好
   设置方法
<ProTable
...
search={{ labelWidth: 'auto' }}
/>
2. span栅格个数,同antd的Row Col组件,这里要注意,搜索表单有一览按钮操作,如果同一行,也算一列.不设置时会根据页面宽度自动计算个数
设置方法
<ProTable
...
search={{ span: 6 }}
/>
3. collapsed是否折叠,表单查询项过多时会默认折叠,可以通过属性控制.注意,如果变为可控,折叠状态失效,点击折叠图标时需要手动改变值. 如果只需要页面在初始化改变,可以使用defaultCollapsed设置
设置方法
const [collapsed, setCollapsed] = useState<boolean>(true)
<ProTable
...
search={{
collapsed, // 状态可控
onCollapse: (value: boolean) => { // 通过方法手动修改状态
setCollapsed(value)
}}
/>
4. searchText,resetText查询,重置按钮的文本.表单搜索默认有两个dom.查询和重置,内置了相关事件方法.可以改变文本
设置方法
<ProTable
...
search={{
searchText: '提交'
}}
/>
5. optionRender,自定义搜索操作组件. searchText,resetText只能修改文字,如果想加入icon或者多添加按钮,可以通过optionRender自定义.optionRender返回3个参数searchConfig,就是search里的api,例如前面所设置的属性 formProps,就是search这个form表单示例 dom就是自带的两个组件搜索和提交
设置方法
<ProTable
...
search={{
optionRender: ({ searchText }, { form }) => {
// console.log(searchConfig, formProps, dom)
return [
<Button
key="reset"
icon={<RedoOutlined />}
onClick={() => {
form?.resetFields();
}}
重置
</Button>,
<Button
key="sub"
icon={<SearchOutlined />}
onClick={() => {
form?.submit();
}}
{searchText}
</Button>,
<Button key="out" onClick={() => console.log(6668)}>
导出
</Button>,
];
},
})
}}
/>
6. 设置form表单值.设置默认值可以通过设置columns里面的initialValue.如果不是在初始化赋值.可以使用方法在指定时刻赋值.赋值方法和antdesign的form表单一样
设置方法
const formRef = useRef<ProFormInstance>()
// 设置form值
const changeTitle = (value: string) => {
formRef?.current?.setFieldsValue({
title: value,
number: 800,
})
<ProTable
...
formRef={formRef} // 赋值ref
/>
源码地址: https://github.com/shengbid/antdpro-demo/tree/main/src/pages/proTable/search
文档地址: https://procomponents.ant.design/components/table/#search-%E6%90%9C%E7%B4%A2%E8%A1%A8%E5%8D%95
相关文章：
EASYUI 表单(FORM)用法
2021-05-17
form表单用法
2022-12-23
form表单属性及表单分组
2021-11-12
Ext.form表单中各种属性应用详解
2021-07-04
html表单中的enctype属性
表单中的enctype属性
2022-12-23
js form 表单属性学习
2021-11-12
form表单的属性标签
2021-11-12
猜你喜欢
js form表单onsubmit事件用法详解
2021-11-18
form表单详解
2021-09-09
Form表单属性说明
2021-11-12
form表单属性，方法
2021-11-12
表单常用属性
2021-11-12
form表单的用法
2021-07-08
相关资源
FORM Regular字体,FORM字体下载下载
2021-11-03
form.dll下载
2023-01-30
Search.dll下载
2023-01-01
相似解决方案
使用 cripsy 修改 django 表单中的 .form-group 属性
2020-04-27
未使用 enctype='multipart/form-data' 获取所有表单属性
2018-01-28
Struts 1 表单嵌套属性无法解析
1970-01-01
ajax 更改 multipart/form-data 表单上的目标属性
2014-09-06
标签之前的 AngularJS 表单项验证属性
1970-01-01
将用户数据解析为mailto form的&body属性
2012-07-18
具有与表单属性相同的名称属性的表单元素，隐藏/覆盖本机表单属性。有解决方法吗？
1970-01-01
Django Form无法识别模型属性
2019-11-01
一个组件中的多个表单无法识别表单和初始值属性（redux-form v7.0.4）
2018-02-21
Struts 2中没有action属性的form标签的解决方法
1970-01-01
热门标签
Java
Python
linux
javascript
C#
Mysql
Docker
算法
前端
SpringBoot
Redis
Vue
spring
.net core
设计模式
kubernetes
.net
c++
数据库
数据结构
大数据
js
微服务
机器学习
Android
Go
程序员
面试
JVM
ASP.net core
云原生
git
PHP
人工智能
后端
CSS
golang
k8s
Nginx
mybatis
深度学习
Django
多线程
React
devops
架构
爬虫
云计算
Spring Boot
容器
By 2023 likecs 版权所有,本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。
粤ICP备22038628号Powered By WordPress