当el-select使用搜索时，选中搜索出的下拉选项 然后再次点击显示下拉框时 选中的选项变了的问题

最新推荐文章于 2023-08-06 17:43:46 发布
最新推荐文章于 2023-08-06 17:43:46 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： web前端 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42484910/article/details/122601356
版权

代码
在这里插入图片描述

问题 重现
1.搜索选中一项
在这里插入图片描述
2.选中后 再次点击展开下拉框
在这里插入图片描述

3.然后随便点击某处 隐藏下拉框(不是切换下拉框选项)
在这里插入图片描述
问题 - 不是原来选中的选项了 变了
问题原因-解决 （key 值问题 之前是用index 经过一系列的方法 改变options时 index可能不准确对于数据来说）
在这里插入图片描述

一个写bug的人
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于el-select 远程搜索下拉框消失解决办法
qq_37225650的博客
03-28 2603
.seclectSearch{ .el-select__caret::before{ content: '\e6e1'; } .is-focus{ .el-select__caret{ transform: rotateZ(0deg); } } }
Select 下拉框选中值期望与下拉框的options值不同
lixinhua_man的博客
06-23 918
有时候期望下拉框的值显示与选中的值希望不一致时， 可以采用slot插槽， 当然还有另一种模糊搜索也可以处理，但是业务暂时不需要涉及到那块 eg : optios的显示的值 为 name + code 而select 选中的值只想要 code在上面时 采用 slot解决 <Select v-model="materielInfo.unitOfMeasurementCode" style="width:150px" :disabled="!editabl
element中select选择器默认展示第一条，再点击其他内容连带默认显示那条都显示被选中状态
weixin_43945122的博客
07-05 1961
select默认赋值，选择过得内容都显示为被选中状态
element- ui , el-select 多选，选择后自动关闭下拉框
热门推荐
Shimeng_1989的博客
10-26 1万+
情景： 单选选中之后再次打开，不会定位到当前下拉勾选项位置，但多选可以，所以用多选代替单选框，每次替换所选的值，实现单选的效果（但是下拉框不自动关闭），如图： 单选（打开）： 多选（打开）： ......
elementui，vue项目开发中el-select支持模糊搜索【下拉选择框支持模糊搜索】
五颜六色的白
10-28 3615
做项目的过程中需要下拉选择框支持模糊查询，呐，下面这些代码希望对你有帮助 html代码 <el-form-item label="销售产品" prop="branchFen"> <el-autocomplete v-model="ruleForm.branchFen" :fetch-suggestio
在element-ui中两个下拉菜单（el-select）如何实现点击第一个下拉菜单的某一个选项实现控制第二个下拉菜单的显示与隐藏！
最新发布
TangMonk的博客
08-06 1802
在这个示例中，首先有两个选择框，一个是第一个选择框，另一个是根据第一个选择框的选项控制显示与隐藏的第二个选择框。如果选中的不是第一个选项，我们将 `showSecondSelect` 设置为 `false`如果选中的是第一个选项，我们将 `showSecondSelect` 设置为 `true`这样，通过监听第一个选择框的选项变化，您就可以动态地控制第二个选择框的显示与隐藏了。在 Element-UI 中，您可以通过。，从而显示第二个选择框。，然后根据选中的选项来。
vue使用iview里select组件搜索后选中的数据和下拉列表展示内容不一样
qq_42648288的博客
02-25 1597
vue使用iview里select组件搜索后选中的数据和下拉列表展示内容不一样
select下拉框选中进弹出新页面
weixin_30925411的博客
12-26 488
<select name="select6" style="width: 180px;" onchange="if (this.selectedIndex!=0) window.open(this.value)"> <option>--请选择--</option>...
el-select 可下拉可搜索可保留
qq_36229552的博客
04-27 2718
el-select 点击关闭下拉框，内容会清空，只要简单操作，即可保留输入内容！ 1、添加 filter-method 方法 <el-select :filterable="true" v-if="item.type === 'select'" v-model="formAdd[item.value]" :p
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决layui的下拉搜索框异步加载数据的问题
m0_38007940的博客
12-31 5363
思路分析：当我使用layui默认的下拉搜索框的时候，layui会默认渲染出一个HTML结构，所以我把渲染出来的这个结果直接给复制出来，这样css的样式就不用从头到尾写一遍了， 前端代码（我用的是jsp）： &lt;%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%&gt...
element UI select allow-create 创建新条目时不多点击一次
weixin_46096901的博客
06-16 2116
element UI select allow-create 创建新条目时不多点击一次
javaweb和ajax使用查询出来的数据做下拉菜单_Excel里超好用的“搜索式”下拉菜单，很多人都不知道！...
weixin_39720662的博客
11-03 269
工作中，需要规范收集有固定选项的一类信息时，肯定首选用【数据验证】制作下拉列表。下拉列表不仅可以规范单元格录入的内容，而且还快捷。看下图，是不是很快！可是，我在用下拉列表收集员工户籍信息的时候，居然翻车了！！！因为户籍列表太长，而惨遭嫌弃！！于是，抛弃了我的表格之后，同事们就开始「花样」填表。其中，就一个广西省，都可以填成这样。广西的同胞们是想气死我呢？还是笑死我？敢情你们知道自己省份全称的人不多...
layui下拉框选择后，刷新页面保留上一次的选择,数据是之前搜索条件的数据
云子
08-02 2286
流程： 1.下拉框选择后，提交表单 在提交中将选择的值设置到sessionStorage 2.使用form.val和form.render() <div class="layui-inline"> <label class="layui-form-label">年级</label> <div class="layui-input-inline"> <select name="grade" lay-search id="form_vi.
Vue el-select下拉框选择成功时不显示，但是当选择其他下拉框的时候，又可以成功显示
m0_48557659的博客
02-28 1720
change事件的，这个是我解决后加上的，现在遇到的bug,并不是通过this.form.*设置的，所以不是$set的问题。这个问题我只，也遇到过，想看的可以看一下。，今天我又遇到了，先看一下代码部分。
el-select,el-option下拉选择框
qq_59076775的博客
07-04 6657
下拉菜单的使用
watch监听的immediate:true理解
weixin_42484910的博客
07-21 1万+
解释immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。所以当为true时在created周期里就可以不用在写已经在watch中写过的方法了。...
点击el-select下拉框中显示表格
07-28
要在el-select下拉框中显示表格，你可以使用el-table组件作为下拉框的下拉内容。以下是一个示例代码： ```html <el-select v-model="selectedOption" @change="handleSelectChange"> <el-option v-for="item ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值