react+ant-design-proTable 设置搜索条件中的默认值
需求:
这个规则组ID的 下拉列表是通过向后端请求获取的,如何设置自定义渲染列表,并且默认有值
let groupLists = [] as any, //规则组列表
defaultValue = ''; //默认值
const formRef = useRef<ProFormInstance>(); const columns: ProColumns<IssueItem>[] = [
{
title: '规则组ID',
dataIndex: 'rGroupId',
valueType: 'select',
initialValue: defaultValue,
renderFormItem: (_, { defaultRender }) => {
return (
<Select showSearch placeholder="请选择" optionFilterProp="children">
{groupLists.map((item: any) => {
return (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
);
})}
</Select>
);
}
}, ];
/**useEffect */
useEffect(() => {
getGroupList();
}, []);
/**function */
const getGroupList = async (): Promise<any> => {
let reqParams = {
page: 1,
size: 99999,
search: ''
};
await ruleApi
.getGroupList(reqParams)
.then((res) => {
let { content } = res && res.data;
groupLists = content;
defaultValue = groupLists.length ? groupLists[0].id : '';
formRef.current?.setFieldsValue({ //这个formRef作用在ProTable标签上,如下图
rGroupId: defaultValue
});
})
.catch((err) => console.log(err));
};

react+ant-design-proTable 设置搜索条件中的默认值的更多相关文章
- 设置select组件中的默认值
会员卡类型 <select id="name2" style="width:140px"> <option value="Ak& ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- React + Ant Design网页,配置
第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步: https://blog.csdn.net/u0129070 ...
- yii2中textarea中的默认值设置
1. view中显示文本域的位置 <?= $form->field($goods_model, 'goods_introduce')->textArea(['class'=>' ...
- asp.net EF model中的默认值设置
在做数据库规划时,通常会规划一些系统字段,也就是由数据库本身自行指定默认值到这个字段上,创建新的“创建时间(CreateDate)”字段就会常常这样设计. 如果希望能有默认值,且让.net 程序在新增 ...
- python 输入加密的MD5值,并搜索文件中的原始值
此程序可以输入一串MD5的值,并在指定的文件中搜索到原始值.程序自有用处. #输入加密的MD5值,并搜索文件中的原始值 by qianxiao996 #博客地址:https://blog.csdn.n ...
- struts中的常量,action配置中的默认值
1.struts中Action的开发方式 继承ActionSupport类,这种方法实现的Action可以进行数据校验: 实现Action接口: 不继承任何类,不实现任何接口: 是否继承类或实现接口, ...
- js 设置下拉框的默认值
设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...
- EF Core中,通过实体类向SQL Server数据库表中插入数据后,实体对象是如何得到数据库表中的默认值的
我们使用EF Core的实体类向SQL Server数据库表中插入数据后,如果数据库表中有自增列或默认值列,那么EF Core的实体对象也会返回插入到数据库表中的默认值. 下面我们通过例子来展示,EF ...
- (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建
首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...
随机推荐
- 敌兵布阵 HDU - 1166 - 单点修改,区间查询:树状数组/线段树
C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...
- 2022-04-19内部群每日三题-清辉PMP
1.一个项目的完工预算(BAC)为100,000美元.目前的项目报告显示该项目符合进度和预算.一位团队成员对相关工作包进行自下而上估算,表明剩余工作将比原计划少用10,000美元,并且仍能按进度计划交 ...
- Qt6以上安装速度慢解决-国内镜像加速
1.安装抓包软件Fiddler最新版本 Fiddler30天试用 2.在软件下方输入栏内粘贴以下命令 urlreplace download.qt.io mirrors.tuna.tsinghua.e ...
- jmeter非GUI模式运行-分布式测试
上一篇文章我们说到了jmeter命令行运行但是是单节点下的, jmeter底层用java开发,耗内存.cpu,如果项目要求大并发去压测服务端的话,jmeter单节点难以完成大并发的请求,这时就需要对j ...
- shell_Day01
1.判断/etc/inittab文件是否大于100行,如果大于,则显示"/etc/inittab is a big file."否者显示"/etc/inittab is ...
- Mysql学习:4、DML命令(增删改查)及密码修改
1.查询表中所有数据: select * from students; 2.插入数据: insert into students (id,name,email,address) values(1,'张 ...
- python基础篇 12-函数+文件读写+json练习作业
需求: 写一个管理商品的程序,商品文件格式在a.json里面 提供商品的增删改查功能 choice = input('请输入你的选择:1.查看商品 2.新增商品 3.修改商品 4.删除商品') #1. ...
- SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated
错误提示: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in ...
- win电脑查看wifi密码的方法
1.使用电脑连接需要查看的WiFi,鼠标右击电脑桌面右下角[WiFi图标],在弹出的菜单中点击[打开"网络和internet"设置]. 2.在弹出的设置窗口中点击[网络和共享中心] ...
- c++学习 4 运算符及其应用技巧
一 按位与运算符 "&"按位与运算符,全1为1,有0则0. 特点:和1相与保持不变,和0相与都变为0. 功能:将指定位置清0. example: 1000 1100 &am ...