antd-vue a-select 使用v-model赋值之后无法选择其它option

最新推荐文章于 2024-04-15 16:12:25 发布
最新推荐文章于 2024-04-15 16:12:25 发布
阅读量5.1k 收藏 4
点赞数 6
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35473192/article/details/113522995
版权

今天在帮同事解决问题的时候遇到的

进入页面后通过v-model对下拉框赋值

赋值成功了之后，当选择其它option时，值始终不改变，显示的依然是进入页面后绑定的值，也没有异常信息。

排查之后发现是因为在data中，只定义了queryParam并没有定义下面的nameMaVehcle这个key

将nameMaVehicle声明出来以后就解决了。

<Michael>
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
antd-mobile-vue:antd-mobile的vue实现
05-17
如有问题可添加个人微信（wuhao1200），欢迎共同交流该项目原本为公司内部项目，现放到github上开源，发布个时候项目名称改为antd-mobile-vueantd-mobile-vue基于 Vue 的组件库，代码由antd-mobile转为Vue版本，目前...
页面初始化，antd组件默认值赋值失败
zw19940808的博客
08-16 1295
开发中，很多场景需要给下拉款、时间、输入框这些组件给定默认值。antd也很贴心的提供了defaultValue和value这两个api defaultValue:初始值 value:当前值 – –所以我们会选中defaultValue这个api 场景一：给列表中的input设置默认值 很显然是有效果的。 八特，当我们修改input值之后，再点搜索（未执行保存操作），input的值并没有回到初始值–– 我的理解是defaultValue是组件实例化之后只会执行一次的...
vue el-select 设置默认值后选项无法切换
goodboxs的博客
12-31 655
vue el-select 设置默认值后选项无法切换 解决方式。
antd ＜a-select＞下拉框选中选项，下拉框数据不改变
最新发布
qq_50970746的博客
04-15 231
下拉框保存可以保存上，但是页面下拉框选中选项不变，因为没加载出来，加上@change="$forceUpdate()"属性强制刷新，vue2有这个问题，vue3已修复。
ant design vue:a-select使用v-model后无法选择的解决方法
1111111111
03-15 7984
<a-select :options="options" v-model="model.pid" @change="handleChange"></a-select> 刚开始我用了v-model="model.pid"，下拉列表确实可以获取到model.pid作为当前值，下拉选项也可以显示出来，但是点击其他选项根本无反应 ...
vue中 select的v-model简单应用
reembarkation的博客
06-30 1552
vue中 select使用v-model绑定，并设置动态下拉项
antdesign of vue关于a-select下拉框选择不生效问题
DENGHANJIE123的博客
09-02 6265
antdesign of vue关于a-select下拉框选择不生效问题
vue2+antd 使用select 通过v-model 无法回显也不能修改？
湖北太米网络科技有限公司
11-08 687
<template> <a-table size="middle" :data-source="dataList" :pagination="false" :locale="{ emptyText: '暂无数据' }" :scroll="{ x: 'max-content' }"> &l...
antd-mobile-vue3.0:适用于vue 3.0的ant mobile
04-06
本项目是在本人之前移植的antd-mobile-vue的基础上使用vue3+vite2进行了改造，目前绝大部分组件都可以正常使用如有问题可添加个人微信（wuhao1200），欢迎共同交流antd-mobile-vue基于 Vue3 的组件库，代码由antd-...
vue-antd-admin：:ant:Ant Design Pro与Vue的实施
02-06
简体中文|Vue Antd管理员的Vue实现版本开箱即用的中后台前端/设计解决方案多种主题模式任选：预览地址： : 使用文档： : 常见问题： ://iczer.gitee.io/vue-antd-admin-docs/start/faq.html国内知名： ://gitee....
vue-antd-mobile
05-13
vue-antd-mobileAnt Design mobile of Vue实现基于组件库样式使用Install 安装正在开发中...This module is still working in progress right now, so it is just for placeholder.Usage 使用Develop 开发build 打包...
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server ...
Vue + Ant Design，select 选中后修改该下拉选项。
是秃子总会发光
02-23 2532
Vue + Ant Design，select 选中后修改该下拉选项。select 组件的 labelInValue 参数。
Ant design vue之a-select的用法
weixin_42385866的博客
10-24 4168
ant design vue的下拉框a-select的基本用法
关于给select赋初始值后，界面重新选择其他下拉选项无法替换显示新选项解决方法
qq_37107017的博客
07-08 842
给select赋值之后，再点击选择下拉值时，显示一值不变的解决
vue使用antd中的select中的default-value无法动态修改
CSND7997的博客
08-27 3022
想实现的效果为 点击 table中的班组即可实现select选择框中的值改变， 只需要给a-select添加一个key属性值与default-value属性值一样即可
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
丑小鸭变黑天鹅的博客
11-29 4623
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 }
vue antd中的select用法
queen_css的博客
11-14 1536
下拉框的使用
a-select 使用v-model双向绑定，选中值为空时候，placeholder不生效
shadow_yi_0416的博客
07-07 1618
ant-design-vue，表单组件下拉框a-select 发现当绑定值为“”时候，placeholder没有生效。
antd-vue中的a-select选中后样式上发生上下浮动的情况怎么解决
05-31
在`antd-vue`中，`a-select`组件是基于`Ant Design`的`select`组件进行封装的。当选中某一项后，由于默认的样式会出现上下浮动的情况，你可以使用`antd-vue`提供的自定义样式解决这个问题。 具体步骤如下： 1. 在你的`Vue`组件中引入`a-select`组件，并设置`options`和`v-model`属性。例如： ```vue <template> <a-select v-model="selectedOption"> <a-select-option v-for="option in options" :value="option.value" :key="option.value">{{ option.label }}</a-select-option> </a-select> </template> <script> export default { data() { return { options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } ], selectedOption: '' } } } </script> ``` 2. 在你的`Vue`组件的`<style>`标签中添加以下样式： ```css /* 禁用上下浮动 */ .ant-select-selection--single { transition: none !important; } /* 设置选中项的样式 */ .ant-select-selection--single .ant-select-selection-selected-value { color: #333; font-weight: bold; } ``` 这样，当你选择某一项时，选中项不再上下浮动，而是保持原位，并且选中项的样式也会变成粗体黑色。 希望这个解决方案可以帮助到你。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值