ant design中Select,Option动态加载,设置初始值无法默认选中项问题

最新推荐文章于 2023-08-11 00:30:05 发布
最新推荐文章于 2023-08-11 00:30:05 发布
阅读量1w 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwf1225/article/details/101300935
版权

ant design中Select,Option动态加载,设置初始值无法默认选中项问题

发布时间： 2019-02-27 17:42:47

一般遇到表单回显的问题的时候,会使用initialValue设置初始值

  {form.getFieldDecorator('name', {initialValue:current.name})(<Input placeholder="请输入姓名" />)}

但是发现动态加载的Option选项的Select,无法选中指定项,而是直接显示绑定的值,检测得到Option中的key必须是字符串,所以设置的initalValue必须先转成字符串,就可以解决了

wwf1225
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' }] })( <Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
ant design pro动态菜单
10-08
自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
antd中Select默认值显示数值而不是名称
qq_45149366的博客
10-26 3291
antd中Select默认值显示数值而不是名称
【React+antd】antd 4.X Select组件 传入defaultValue变化 展示不变
all_might1的博客
01-10 874
一、问题描述 升级antd到4.x之后，官网文档上发现没有提及initialValue，于是使用了defaultValue。 改组件设置初始值，从接口调入。页面初始进入接口没有返回的时候，对应数组数据为空；等到接口返回数据后，对应数组也塞入正确数据，但是Select组件展示表现还是为空。（我用的是多选） 二、解决思路 因为之前解决过一个 打开列表中不同Drawer，展示数据不变化的问题。所以联想，会不会是在页面...
antDesign的a-select数据回显选中initialValue问题解决方法
marko39的专栏
07-28 1403
在开发过程中表单中的【学习专业】下拉列表项需要数据回显，设置了initialValue，但只显示下拉选项的majorId值, 没有显示具体的专业名称，经排查发现是majorId数据类型导致的，下拉选项majorList数组中的id是数值类型，而在表单赋值时给的majorId是字符类型，数据类型不一致导致的 ，将两边的id类型转为一致的就可以了。在对变量赋值时，强制转变类型 , 我这是都转为数值类型，你都转为字符类型也可以。下拉框数据回显正常了。
ant中select回显value问题
weixin_47102346的博客
08-11 1398
react项目中使用ant的select选择器遇到的问题，选中某一项后，想要的效果是显示选中项的label，但回填到选择框却为为value值。
antd之Select下拉框回显数据——2022-06-27
m0_51400566的博客
06-27 2182
问题：点击【编辑】弹框后，回显数据时候有误。如图Select部分代码： 解决办法：由于JSX语法，修改为value={1}实现效果：
antd select的默认值 动态 或者静态设置
zhangyubababa的博客
04-27 4022
设置select option的默认值！ 就是设置select 有一个defaulValue props 设置和option对应 就是select的默认值
antd中select的默认值
Smile_666666的博客
10-31 3921
今天做项目的时候需要用到select默认值，一开始使用defaultValue，页面没有重新渲染，后面改为value就会重新渲染，不知道这是什么原因~ 记一下这个小知识点~ 修改后
解决ant-design-vue中menu菜单无法默认展开的问题
01-18
在ant-design-vue的文档中， menu有两个可以传的参数，分别为defaultOpenKeys和openKeys，但在接手做一个项目时，openKeys这个参数前人已经写了，可能是从文档中直接复制demo没有删除掉，我也没去管。 等到需要用到...
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
react antd组件中使用select的defaultvalue无法设置默认值是什么原因？该怎么解决？（已解决）
m0_71266141的博客
08-14 2343
react项目中antd组件库中的select默认值无法设置
vue ant design中关于给select设置初始默认值的问题（initialValue无效、用defaultValue则报`defaultValue` is invalid错误）（已解决）
热门推荐
qiqiliuwu的博客
09-18 2万+
问题：当我们在用vue ant design给select设置默认值时，如果采用v-decorator的方式去注册控件，且要对表单内容进行校验，那么这个时候无论是如下边错误1一样使用defaultValue=“2”这样来设置默认值，还是如同错误2一样使用initialValue: 2来进行设置，还是如同错误3一样使用:value="2"这样设置了值却无法注册typeId，都会设置无效或者报错等等，...
Ant Design Vue select下拉列表设置默认值
Y4258的博客
04-22 4774
如果要默认值，还可以这样设置 ：default-value
ant design vue选择器select的使用（详细）
weixin_45745641的博客
08-11 1万+
概要 这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图： 具体实现过程： 写好前端样式 对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果 看一下 a-select 中的
antdesgin设置select默认值
zhangchangzhangchang的博客
06-06 4555
当采用[ngModel]="" 绑定时，select 默认值必须设置option存在的值，当select设置可以为空时，才可以设值select默认值为空； this.selectedPostName=this.postNameData[0]; 在form表单中 采用formcontrolName绑定数据设置默认值以以下形式设置 get()里面为页面绑定的值 setvalue()为值 this.va...
java练习题13.txt
最新发布
04-18
java练习题
antdesignvue a-select默认选中
06-03
在Ant Design Vue的`Select`组件中，您可以使用`v-model`来设置默认选中的选项。 例如，如果您想要默认选中`value`为`"apple"`的选项，您可以这样做： ```html <a-select v-model="selectedValue"> <a-select-option value="apple">Apple</a-select-option> <a-select-option value="banana">Banana</a-select-option> <a-select-option value="orange">Orange</a-select-option> </a-select> ``` 在这个例子中，我们使用`v-model`指令来绑定`selectedValue`变量，该变量的初始值为`"apple"`。这样，`Select`组件就会自动选中`value`为`"apple"`的选项。 如果您想要在多选模式下设置默认选中的选项，您可以将`v-model`绑定到一个数组上，例如： ```html <a-select v-model="selectedValues" mode="multiple"> <a-select-option value="apple">Apple</a-select-option> <a-select-option value="banana">Banana</a-select-option> <a-select-option value="orange">Orange</a-select-option> </a-select> ``` 在这个例子中，我们将`v-model`绑定到`selectedValues`数组上，并且将`mode`属性设置为`"multiple"`，表示多选模式。这样，`Select`组件就会自动选中`value`为`"apple"`的选项。 请注意，无论是单选模式还是多选模式，您都需要为每个选项设置一个唯一的`value`属性，以便在绑定`v-model`时正确识别选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值