Ant Design ProTable 搜索框设置默认值_清风明月的博客的博客-CSDN博客
Ant Design ProTable 搜索框设置默认值
清风明月的博客
于 2021-04-14 18:18:33 发布
5150
收藏
分类专栏：
Ant Design
文章标签：
Ant Design
Protable
React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxia188/article/details/115705609
版权
Ant Design
专栏收录该内容
8 篇文章
4 订阅
订阅专栏
最近遇到一个需求，需要在ProTable搜索框的时间周期设置默认开始时间和结束时间，并调用接口返回数据显示。
实现思路：
创建formRef来设置ProTable里面搜索的默认值；通过moment来获取当前月的第一天和最后一天；通过formRef.current?.setFieldsValue赋值给created_at；通过formRef.current.submit()调用接口，渲染页面；
实现该需求的必要代码：
import React, { useState, useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { getList } from './service';
import moment from 'moment';
const columns = [
title: '时间周期',
dataIndex: 'created_at',
valueType: 'dateTimeRange',
hideInTable: true,
search: {
transform: (value) => {
return {
start_time: value[0],
end_time: value[1],
};
},
},
},
const formRef = useRef();
const curMonth = [
moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
];
useEffect(() => {
formRef.current?.setFieldsValue({
created_at: curMonth,
});
formRef.current?.submit();
});
return (
<>
<ProTable
columns={columns}
request={getList}
rowKey="id"
formRef={formRef}
/>
</>
使用时遇到问题可以给我留言
清风明月的博客
微信扫码订阅
UP更新不错过~
关注
关注
点赞
收藏
打赏
知道了
12
评论
Ant Design ProTable 搜索框设置默认值
最近遇到一个需求，需要在ProTable搜索框的时间周期设置默认开始时间和结束时间，并调用接口返回数据显示。实现思路：创建formRef来设置ProTable里面搜索的默认值；通过moment来获取当前月的第一天和最后一天；通过formRef.current?.setFieldsValue赋值给created_at；通过formRef.current.submit()调用接口，渲染页面；实现该需求的必要代码：import React, { useState, useEffect, useR
复制链接
扫一扫
专栏目录
ant design pro动态菜单
03-30
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！ 自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
AntD Pro ProTable 搜索项设置默认值
飞扬小阁
02-21
1835
// 列表 搜索项 默认值
useEffect(() => {
formRef.current?.setFieldsValue({
queryMonth: moment().format('YYYY-MM')
});
formRef.current?.submit();
},[])
colums类型日期月份valueType:'dateMonth'
title: '月份',
key: 'queryMonth',
...
12 条评论
您还未登录，请先
登录
后发表或查看评论
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
12-03
背景
最近在使用Bootstrap table ，有一个在某一列添加一个下拉列表，并且通过 “getAllSelections”方法获取所选行的需求，在实现这个功能的时，走了一些弯路，遇到了一些坑。所以今天总结出来，既是自己的学习，也分享给大家，希望能够有些帮助。
如何解决
添加这个下拉列表有以下两种方法：
利用Column options 中的 formatter 将数据转换成下拉列表的形式
使用bootstrap-table拓展中的editable插件
这次主要介绍第一种，基本的思路为：首先通过 bootstrap-table 的Column 配置项中的formatter，将获取到
ProTable的时间范围筛选条件valueType: ‘dateTimeRange‘
weixin_67150966的博客
03-17
109
valueType: 'dateTimeRange',
AXURE Ant Design 4.40 - web组件库 ant design pro 后台模板 产品经理
02-13
rp以及rplib两种格式
Ant Design以及Ant Design Pro入门.pdf
10-28
Ant Design以及Ant Design Pro入门资料
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
此仓库已废弃
重要： 此仓库后续不再维护，也不再接受更多的特性更新。ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问 了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。
@ant-design/pro-table
:trophy: Use Ant Design Table like a Pro!
Demo
API
pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd table 不同的 api。
Table
属性
描述
类型
默认值
request
一个获得 dataSource 的方法
(params?: {pageSize: number;current: number;[key: s
protable在切换tab之后，出现params有之前搜索框的缓存的解决方法。
qwe5117022的博客
04-11
1510
protable在切换tab之后，如何保存多选，并且清除掉之前的缓存
在用protable做数据表格的时候，经常会遇到需要切换下拉框之后就要重新下拉框的时候重新请求
这里有个问题就是如果seach点击了某个选项，我再去切换select之后就会出现一个问题，search的参数，会被保留下来。在我切换左边的下拉框的时候，请求里面带了脏参数。
解决思路如下
在切换tab之后先去清除search框的默认选中的数据，首先要获取formRef
formRef.curren
Powerdesigner 设置默认值 columns -> standard checks -> default
weixin_34082177的博客
05-18
224
Powerdesigner 设置默认值 columns -> standard checks -> default
转载于:https://www.cnblogs.com/tomkillua/archive/2009/05/18/1459396.html
oracle column的设置,Oracle【COLUMN】设置表字段默认值仅对未来生效
weixin_30803379的博客
04-02
351
【COLUMN】设置表字段默认值仅对未来生效提问：设置表字段的默认值是否会对已有数据数据进行调整？回答此类问题最有效的方法就是“实践”。设计一个实验进行验证，然后再从原理上进行理解。印象将会深刻。回答：设置表字段的默认值不会对已有数据数据进行调整，只会影响未来字段内容。1.创建测试表T并初始化数据sec@ora10g> create table t (x number,y number);T...
oracle更改列的默认值,oracle11g add default values columns(增加默认值列的改进)
weixin_28595749的博客
04-02
170
oracle 11G 对 现有表增加指定默认值列方式发生了很大变化，无论是存储方式上,还是效率上，下面看一个简单的实验sys@ANBOB> desc ecol$Name Null? Type--------------------...
ant design pro v4的pro-table（默认查询表格）语言（国际化，本地化）设置的问题解决
有趣技术
03-09
5537
一、问题描述
因为本白刚刚接触前端框架ant design pro，这两天遇到了一个问题，就是公司要做一个全英文网站，面向国际的，然后我就把antd的config.js默认语言设置成了英文的：
config.js文件目录
设置如下：
locale: {
// default false
enable: true,
// default ...
Ant Design Pro V5框架中移植原生高德地图
03-10
在Ant Design Pro框架中嵌入高德地图，参考高德官网的源码。 1、在AMapLoader.load中填写你在高德开发平台申请的key 2、在vs code终端运行npm start 3、浏览器中打开http://localhost:8000
基于 Ant Design of Vue 实现的 Ant Design Pro 源码
12-29
基于 Ant Design of Vue 实现的 Ant Design Pro 源码 安装依赖 npm install 开发模式运行 npm run serve 编译项目 npm run build
Ant Design Pro 之 ProTable使用操作
01-21
https://protable.ant.design/ 示例 V4版本刚出不久，网上的教程还比较少，踩了不少坑，把自己学习过程分享出来，希望可以帮到你 创建项目（需要node.js及npm环境） npm config set registry ...
AntDesignPro开发手册.doc
12-13
AntDesignPro开发手册.doc
ant design pro 入门demo
03-02
ant design pro 入门demo,包含自己开发的一个组件，供大家参考
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...
ant design pro学习记录—protable的使用
最新发布
04-28
Ant Design Pro 是一个开源的企业级 UI 设计系统，其中的 Protable 组件提供了用于创建数据表格的工具。使用 Protable，我们可以快速地创建包含分页、排序、筛选、搜索、编辑等功能的数据表格界面。下面是我学习 Protable 的记录：
1. 安装 Ant Design Pro
首先要在项目中安装 Ant Design Pro，可以通过 yarn 或 npm 安装。安装完毕后可以在代码中引用 Protable。
2. 创建数据模型
在使用 Protable 之前，需要对数据模型进行定义，包括数据字段名称、数据类型、数据校验规则等。这些定义可以将其定义为 JSON 格式，Protable 会根据定义自动创建表格界面。
3. 配置数据源
为了让 Protable 能够加载和显示数据，需要设置数据源。可以通过提供数据 API 的方式，也可以将数据源配置为本地的数据 JSON 文件。
4. 设置表格列
Protable 表格界面的列可以定义为可编辑、可排序、可过滤和隐藏等选项。可以通过设置列的属性和方法来控制表格列的效果和操作。
5. 设置操作栏
Protable 还提供了一组工具栏，包括添加、编辑、删除和导出等功能，可以通过设置操作栏的属性和事件来使用这些功能。
6. 使用插件
Protable 还提供了很多插件，在表格界面中集成这些插件可以提高表格的效率和可用性。例如，可以集成省略号显示、显示总行数、自定义分页器等插件。
7. 配置表格样式
Protable 通过 CSS 样式文件控制表格的样式。可以自定义表头、表格行、分页器、工具栏等样式，以适应特定的应用场景。
总的来说，使用 Ant Design Pro 的 Protable 组件可以迅速创建一个功能强大的数据表格界面，同时 Protable 的灵活性和可扩展性也是很强的，可以满足各种需求。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
清风明月的博客
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
95
原创
5万+
周排名
49万+
总排名
34万+
访问
等级
2461
积分
37
粉丝
102
获赞
65
评论
285
收藏
私信
关注
热门文章
如何提高网页的加载速度 ——优化网页图片加载
28599
在HTML5中，用getCurrentPosition()获取用户的当前位置
21816
vite项目在jenkins自动打包报错：failed to load config from ../vite.config.js You installed esbuild on
18749
vue运行或打包报错Ineffective mark-compacts near heap limit Allocation failed-JavaScript heap out of memory
18425
JSON的特点和优势
16367
分类专栏
Uniapp
3篇
小程序
2篇
Git and npm
3篇
ReactJS
8篇
Webpack
1篇
支付宝小程序
1篇
vuex
1篇
UmiJs
3篇
mac
1篇
Ant Design
8篇
Taro
4篇
Flutter
2篇
Vue
6篇
Vue3
6篇
Vite
6篇
Dart
1篇
Vue项目中报错处理
5篇
Canvas画图
2篇
Swiper和Canvas画轮播海报
1篇
JavaScript
12篇
Vue汇总笔记
9篇
HTML/HTML5
4篇
JSON
1篇
web网页优化方案汇总
6篇
CSS/CSS3
7篇
Node.js
1篇
HTTP协议
2篇
Jquery
2篇
EasyUI
1篇
最新评论
vue运行或打包报错Ineffective mark-compacts near heap limit Allocation failed-JavaScript heap out of memory
SeptMeteor:
说得很清楚，我用了第一个方法命令2报错了，改用方法二解决了，感谢
http报文头部有哪些字段？有什么意义？
我吃饭的时候不饿_:
留下脚印
vite项目在jenkins自动打包报错：failed to load config from ../vite.config.js You installed esbuild on
zhangyubababa:
windos 下载后 是存在哪里的呀？ 找不到
Ant Design ProTable 搜索框设置默认值
m0_74818612:
那重置的时候怎么传默认值呢
ant design的关闭ModalForm和Modal弹框，清除数据的方法
ph_pml:
为什么我不生效啊
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
vue-i18n的9以上的版本中@被用作特殊字符处理，直接用会报错
vite项目在jenkins自动打包报错：failed to load config from ../vite.config.js You installed esbuild on
vue.3.0+vite+ts的uni-app项目Typescript引起的报错处理
2022年2篇
2021年44篇
2020年4篇
2019年10篇
2018年36篇
目录
目录
分类专栏
Uniapp
3篇
小程序
2篇
Git and npm
3篇
ReactJS
8篇
Webpack
1篇
支付宝小程序
1篇
vuex
1篇
UmiJs
3篇
mac
1篇
Ant Design
8篇
Taro
4篇
Flutter
2篇
Vue
6篇
Vue3
6篇
Vite
6篇
Dart
1篇
Vue项目中报错处理
5篇
Canvas画图
2篇
Swiper和Canvas画轮播海报
1篇
JavaScript
12篇
Vue汇总笔记
9篇
HTML/HTML5
4篇
JSON
1篇
web网页优化方案汇总
6篇
CSS/CSS3
7篇
Node.js
1篇
HTTP协议
2篇
Jquery
2篇
EasyUI
1篇
目录
评论 12
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
清风明月的博客
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值