elementui的select无法默认选中值

最新推荐文章于 2024-04-29 16:46:21 发布
最新推荐文章于 2024-04-29 16:46:21 发布
阅读量1.2k 收藏
点赞数 1
文章标签： html 前端 elementui vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42494979/article/details/122493449
版权

elementui的select无法默认选中值的问题

目的

记录学习过程遇到的问题

elementui的select里直接显示的变量值，而非选项值

在这里插入图片描述

可以看到上图中，性别下拉框明明是有默认值的，但是就是没选中
看下面代码：
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/f6df6366cc00455d800ef1139a8f5766.png在这里插入图片描述
最后发现是忘了给下拉框的选项绑定值了，如果要绑定变量的值，那么需要在前加v-bind: 或者简写：
如下图：
在这里插入图片描述

最后结果

在这里插入图片描述
如果对你有帮助，可以点个咱，谢谢

梅小辫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
laravel-admin select框默认选中的方法
01-02
laravel-admin后台框架的select选择框的默认选中，结合select2的js插件； 文档http://laravel-admin.org/docs/#/zh/model-form-fields?id=select选择框； 文档里面没有看到这个默认选中的属性，也可能是我没有找到；查阅了select2的文档看到了selected属性，通过曲线的方式实现了这个功能； protected function form() { return Admin::form(Member::class, function (Form $form)
js获取select默认选中的Option并不是当前选中值
10-25
主要介绍了js如何获取select默认选中的Option并不是当前选中的值,需要的朋友可以参考下
elementUI select组件默认选中效果实现的方法
10-17
主要介绍了elementUI select组件默认选中效果实现的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI之el-select选择器赋值为空后无法选中回显
最新发布
weixin_42678822的博客
04-29 819
【代码】elementUI之el-select选择器赋值为空后无法选中回显。
详解element-ui中el-select的默认选择项问题
10-16
主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在element UI的下拉多选框里如何实现禁用默认值和不可删除默认值
qq_51846847的博客
06-07 2053
在element UI的下拉多选框里如何实现禁用默认值和不可删除默认值
若依vue中el-select绑定值为整数无法默认选择
zwj1030711290的CSDN
01-27 1326
el-select v-model="form.dataStatus" placeholder="请选择状态">4、下拉列表绑定值为整数 - 字典。
element-ui table 复选框判断选中还是未选中及默认值的填充
XueZePeng18729875380的博客
05-09 5486
1. 注意：如果当前列表数据存在分页，那么选中的数据id集合是所有的选中数据，不是当前页选中的数据id集合。2. 将当前的列表数据和选中的id集合进行比对，id存在就使用。中的table组件提供了。方法进行复选框的数据回填。
vue elementUI select下拉框设置默认值（赋值）失败
weixin_51747462的博客
04-04 3258
vue elementUI select下拉框设置默认值（赋值）失败
elementui select 赋值后，回显没有默认选中label，而是显示value值
凉城玖的博客
02-25 4737
bug示意图： 给 select 赋值，select 展示的却是value的数据, 不是我们想看到 label 对应的数据，而且在下方的选择列表中并没有选中传递过来的数据 这个问题一般是 select v-model 所绑定的属性的数据类型和 可以选择列表中的value的数据类型不匹配造成的。 比如： 我的 v-model 绑定的是 dialogData.weChatAutoSendMessageTaskDO.weChatRobotId ，回显就是自己主动给这个 v-model 赋值，如果你给这个 v-
Element-Ui中el-select选择后无法选中
Alone_Endeavor的博客
04-13 3326
由于Vue会在初始化实例时对属性执行getter/setter转换过程，所以属性必须在data中存在才能让vue转换它，这样才是响应式的，在我们开发项目过程中，多数情况下回用到element-ui中的select选择器，在开发过程中，会遇到这种情况，：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。具体来说就是在首次初始化之后，vue不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。受javascript的限制，vue。
select获取下拉框的值 下拉框默认选中方法
08-27
下面小编就为大家分享一篇select获取下拉框的值 下拉框默认选中方法，具有很好的参考价值，希望对的有所帮助。一起跟随小编过来看看吧
elementUI select组件value值注意事项详解
01-19
有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是： v-model绑定的值与option选项value值类型不符， 常规就是number与string 通用我们会循环一个数组、对象生成option选项 1....
jQuery 获取select选中值及清除选中状态
10-20
主要介绍了jQuery 获取select选中值及清除选中状态的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
BootStrap Select清除选中的状态恢复默认状态
12-10
当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢？ 如【图1】 当我们选择摸一个条件之后 如【图2】 此时点击重置按钮要将【图2】的状态回到【图1】，我们会使用很多方法，比如：  ...
angularjs的select使用及默认选中设置
10-20
本篇文章主要介绍了angularjs的select使用及默认选中设置，非常具有实用价值，需要的朋友可以参考下
elementUI 多选框 选项为对象时，初始默认值不选中
qq_42383283的博客
01-22 1821
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示。 解决方法： 下载elementUI源码 cnpm install安装依赖 / npm install安装依赖 修改源码, 在packages\checkbox\src\目录中找到以下代码，进行修改 return this.model.indexOf(this.label) > -1; 改为 return this.mod
记element select 多选 初始化赋值 选择框未选中问题
chentianchengBUG的博客
09-03 699
在data 内数组定义了一个默认值，页面初始化完毕打开dialog 时select框没有默认选中 在新增按钮上重新赋值解决该问题， 推测新增时我先用表单resetFields 方法清除导致
Element Ui 中Select下拉框 默认值初始化失败
youyudehan的博客
09-13 574
Element Ui 中Select下拉框 默认值初始化失败
elementui的select默认选中
08-30
elementUI的select组件默认选中可以通过设置v-model的值来实现。在代码中，v-model绑定的是queryParams.status，而options是循环出的数据。如果想要默认选中第一个数据，可以在queryParams中设置默认值为options.value。这样在页面加载时，默认选中第一个数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue element ui Select 选择器设置默认状态](https://blog.csdn.net/m0_58565372/article/details/127316004)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue使用Element的select 选择器，需要默认选中第一个](https://blog.csdn.net/m0_59023970/article/details/123879018)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [elementUI select组件默认选中效果实现的方法](https://download.csdn.net/download/weixin_38717980/12944922)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值