ant-design-vue设置select选择器选中状态不起效

最新推荐文章于 2023-09-06 14:19:28 发布
最新推荐文章于 2023-09-06 14:19:28 发布
阅读量4.3k 收藏
点赞数
分类专栏： 前端 文章标签： ant vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Halo333/article/details/116652806
版权
在ant-design-vue中，当尝试从后端加载数据并设置select选择器的初始选中状态时，遇到设置无效的问题。原因是使用了'label-in-value'属性，导致需要以对象形式设置选中值，包括key和label。解决方案是根据数据结构正确地设置选中项的key和label。
摘要由CSDN通过智能技术生成

使用ant-design-vue从后端加载数据，然后初始化设置select选择器为选中状态，但是不起作用

首先查看你是不是加了 label-in-value 这个属性

<a-select style="width: 100%" placeholder="请选择资源组" label-in-value
          v-decorator
最低0.47元/天 解锁文章
Halo丶3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
丑小鸭变黑天鹅的博客
11-29 4650
Ant design vue中的a-select在动态给option赋值之后，placeholder失效一、问题描述二、解决办法 一、问题描述 最近做一个项目，用到了a-select，placeholder出现了问题 先看一下不起作用的代码 <a-col :md="8" :sm="24"> <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }
vue3 + ant.design 使用select组件默认值defaultValue不生效
m0_64780137的博客
12-08 1126
vue3 + ant.design 使用select组件默认值defaultValue不生效
ant design vue中树形控件defaultExpandAll设置无效
ke_sin的博客
10-29 784
1.原因：主要是由于ant-design组件数据是单向流动的，树形控件/表格在第一次渲染时异步加载的数据还未存在。所以用v-if确保数据存在再渲染组件 2.解决： <a-tree v-if="treeData.length" defaultExpandAll checkable :tree-data="treeData" @select="onSelect" @check="onCheck"
antdesign of vue关于a-select下拉框选择不生效问题
DENGHANJIE123的博客
09-02 6330
antdesign of vue关于a-select下拉框选择不生效问题
antdesignvue中select选择框初始不选中的问题——解决
King的博客
02-27 1245
select选择框匹配
vue快速学习03、ant-design
06-25
除了基础组件，Ant Design Vue 还提供了诸如表格（Table）、布局（Layout）、下拉菜单（Select）、日期选择器（DatePicker）等多种功能强大的组件。在实际开发中，你可以根据需求灵活组合使用。 此外，Ant Design ...
Ant design vue 的组件禁用属性 disabled.pdf
12-16
Ant design vue 的组件禁用属性 disabled
virtual-select:一个用于通过虚拟滚动下拉列表JavaScript插件
04-28
虚拟选择1.0 一个用于通过虚拟滚动下拉列表JavaScript插件简单轻巧支持超过100000个下拉选项支持多选支持搜索功能指令命令描述npm运行开始在文件更改时生成插件的dist版本npm运行构建构建插件的dist版本npm运行文档...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
antd多选下拉框一行展示的实现方式
01-21
.ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。 2.flex布局
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
antd select 有的时候选择下拉菜单不起作用
suimengfeiyang123的博客
07-13 585
可以使用this.$forceUpdate()，它通过强制 watcher重新渲染来实现更新视图的目的。可能是因为使用到了v-if一开始页面在渲染的时候还没有加载。
【vue】a-select回显后，不能选择
最新发布
michiko98的博客
09-06 602
antdv中<a-select>组件，数据回显后，选其他选项框内元素未改变，但是提交是有更改数据的，是因为下拉选项是从接口循环来的，render函数没有自动更新，需手动强制刷新。
IE中Option的disabled无效解决方法
天涯 书塾
01-31 4531
今天在做东西的时候，想到给option项添加disabled的禁用功能，没想到竟然有属性却无效的。。。不过firefox里倒是有效，无奈，IE虽然差劲，但PC毕竟还是微软的天下。。。。还是要适应IE阿。。。网罗了一下资料，发现一个不错的脚本，那来用了下，感觉不错，基本可以跟firefox里的效果媲美了，而且代码也不多代码如下：（为了注重版权问题，这里就没把原注释删除）/**//**
a-select回显后，不能选择
xiaoran_1997的博客
09-24 1869
antdv中<a-select>组件，数据回显后，选其他选项框内元素未改变，但是提交是有更改数据的，是因为下拉选项是从接口循环来的，render函数没有自动更新，需手动强制刷新。 添加@change="$forceUpdate()"强制更新： <a-select v-model="form3.users"placeholder="请选择" @change="$forceUpdate()"> <a-select-optionv-for="user in...
vue + antd使用a-select的placeholder默认显示不生效
w的博客
02-15 1902
代码： <a-select show-search option-filter-prop="children" :filter-option="filterOption" placeholder="请选择!!!" v-decorator="['id', { rules: [{ required: true, message: '请选择！' }] }]" > <a-select-option v-for="item in dataL
avue下拉框中属性可以显示，但不能选中
Shiny0815的博客
07-14 2252
1、avue下拉框中属性可以显示，但不能选中 追其原因，我对表单分组了，下拉框放在了group组内的column组里面，导致层数过多，产生死循环的bug 2、解决方法：取消分组，把所有的属性放到column属性里面，减少层级，下拉框可正常选择 ...
[antd-vue] a-select v-decorator form.setFiledsValue select placeholder不显示问题
qubes的专栏
09-29 1244
enviroment 使用antd-vue的a-select组件 用v-decorator绑定变量name，设置placeholder goal 使用this.form.setFiledsValue设置变量name为空 this.form.setFiledsValue({name: null}) question 空变量设置成功，select没被选中 但是副作用是placeholder没有显示 solution null改为undefined即可 this.form.setFiledsValue({name
select-option 动态选中状态
qq_34934555的博客
11-04 3227
select-option 小明 校长 销魂 笑话 window.onload=function(){ cc(); } function cc(){ var sel = document.getElementById("sel"); var res=sel.options[sel.selectedIndex].value; document.getEl
ant-design-vue选择器select 值过多怎么解决
04-27
当 `ant-design-vue` 的选择器 `Select` 中的选项值过多时，可以使用 `virtualScroll` 属性来解决性能问题。`virtualScroll` 属性可以将只有部分可见的选项渲染到页面上，而不是全部渲染，从而提高页面的渲染效率。 具体实现方法如下： 1. 将 `virtualScroll` 属性设置为 `true`，并将 `optionHeight` 属性设置为每个选项的高度值。 ```html <template> <a-select v-model="value" :options="options" :virtualScroll="{ itemSize: 32 }" /> </template> ``` 2. 在 `data` 中定义选项数组 `options`，并将其渲染到页面上。 ```js export default { data() { return { value: "", options: [ { value: "option1", label: "Option 1" }, // 重复添加选项以增加选项数量 { value: "option500", label: "Option 500" } ] }; } }; ``` 通过上述方法，可以有效地解决 `ant-design-vue` 的选择器 `Select` 值过多的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值