Vue el-select下拉框选择成功时不显示，但是当选择其他下拉框的时候，又可以成功显示

已于 2023-02-28 17:22:49 修改
阅读量1.6k 收藏 7
点赞数 4
分类专栏： vue 文章标签： elementui 前端 javascript Powered by 金山文档
于 2023-02-28 17:17:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48557659/article/details/129265594
版权

这个问题我只，也遇到过，想看的可以看一下这个，今天我又遇到了，先看一下代码部分

之前是没有，change事件的，这个是我解决后加上的，这个并不是通过this.form.*设置的，所以不是$set的问题

然后让我找到了，

render函数没有自动更新，需要用forceUpdate强制刷新render

如果下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。（ 针对这种情况加了forceUpdate可以解决，想来原理应该也是如此。

解决办法：

给select 添加 change 事件

 this.$forceUpdate() //添加下面代码即可解决你的问题
啥也不会ln
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-select下拉框无法显示 elementplus踩坑日常
最新发布
m0_58031031的博客
03-09 957
检查是否element-plus版本过旧，至少要下载^1.0.2-beta.66 可以在package.json看到版本号。在el-select里面加入:popper-append-to-body="false"使用elementui的dropdown平替一下，这个成功解决了我的问题；如果报错是版本冲突可以用npm install --force解决。在使用el-select的时候参考了官方文档，但下拉框无法显示。安装不同版本的element-plus方式（部分适用）缺点：后续需要自己再调一下格式。
Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法
IT全栈 华强工作室
04-13 6570
前言 在项目开发过程中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他组件数据能正常显示，多选却无法正常回显。 表单代码如需： <el-select v-model="textForm.receDeptIds" multiple filterable allow-create default-first-option @change="changeSelect
解决elementUI中el-select组件的选中不显示问题
xrMrwhile的博客
07-26 5494
el-select组件选中不显示的原因好像只出现在多级联动中,并且选中是有值的,只是单纯的不回显,可以在el-select中加入change事件,然后使用vue的set方法将值重新修改进去 <el-select style="width:60%;margin-left:10px" @change="abc" v-model="temp.region" placeholder="负责人"> <el-option v-for="(item
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题
weixin_64482155的博客
12-13 5665
这应该也是不将弹出框插入至 body 元素之中的原因，所以就给el-select写个状态：全屏时popper-append-to-body为false,非全屏时为true。但在写完之后，发现还是不行，甚至又回到了没加popper-append-to-body的情况（全屏不显示下拉菜单）。在前两天进行页面全屏时，一切都还好好的，可当使用element-ui中的el-select时，下拉菜单却怎么也显示不出来，但只要退出全屏状态，立马就好。可随之而来新的问题产生，非全屏状态下，我的下拉菜单无法完全显示出来了！
el-select 点击输入框不弹出选项的下拉框
weixin_44273231的博客
11-18 3388
el-select 点击输入框不弹出选项的下拉框
记录一次el-select 不显示下拉框 改为弹框显示
weixin_45804109的博客
12-29 1281
this.$refs.choose.blur()
Vue解决el-select下拉框选择值后框上不显示问题
ningmengbu_suan的博客
07-19 2988
Vue解决el-select下拉框选择值后框上不显示问题
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue下拉框回显并默认选中随机问题
12-09
今天做vue的页面下拉框回显问题，回显数据是随机的，好奇怪，虽然多刷新 几下就可以了， 但是这个问题还是存在的，后来发现问题是 回显中的数据是两次请求，因为网络问题两次说不定哪个就请求的快一些， 因为调用的对象不一样，所以可能会不同，改为相同的之后，发现第一次请求的时间始终比第二次时间短一些，达到想要的效果 总结： 1.因为第一次加载下拉框列表的时候，请求列表中所有数据和列表默认回显数据不同，所以会出现被刷新，而出现回显随机问题，，， PS：vue 运用ElementUI,做select下拉框回显 第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。
Element_select 选择器 选中框中显示不了选中的值
虎康的博客
10-21 1611
【代码】element select 选择器 选中框中显示不了选中的值。
使用element过程中出现的问题及解决方法（1）
接着奏乐接着舞的博客
06-29 1776
主要内容为日常使用饿了么UI过程中犯错和解决方案。ps:以后会更新
【Element-Plus】el-select选择后不回显问题
qq_63514555的博客
06-15 1037
因此我们需要的是string类型，但是实际上我们给el-select绑定的是。Vue3 Element-Plus Setup语法糖。（object类型），导致一直绑定不上。到底还是setup语法糖不熟啊🤦‍♀️。el-select上面我们绑定的就是。首先说一下我用的技术。
vue 在el-table内嵌套el-select点击选择下拉项不动态展示的解决办法
weixin_51010848的博客
08-24 2086
vue 在el-table内嵌套el-select点击选择下拉项不动态展示的解决办法。
element el-select下拉框选择失效
qq_53986004的博客
01-11 5801
element el-select下拉框选择失效
关于eltable中嵌套elselect问题
zhouguoguang的博客
08-18 495
但是改成vshow，以上问题就不存在，但是当点击编辑该cell时，初始获取不到焦点，这样当用户点击该单元格，但是不选中任何东西，该select也不隐藏，需要用户点击获取焦点，在失去焦点才可以隐藏。这里用vif点击编辑时，马上可以获取焦点，但是选中elselect中的值不能显示，在vue开发者工具中也没有值，@change事件也获取不到value，请问怎么实现编辑时显示elselect，编辑完毕隐藏elselect。
vue多选el-select下拉框在获取到下拉框中数据的id的时候显示其lable
06-01
你可以使用element-ui中的el-select组件的multiple属性实现多选功能，同时在el-select中使用el-option组件来渲染下拉选项。在el-option组件中，可以使用label属性来设置选项的显示文本，value属性来设置选项的值。在使用多选功能时，可以使用v-model来绑定选中的值，这里的值是选项的value值，如果需要显示选项的label文本，可以在选项被选中时，通过遍历选中的值，找到对应的选项，获取其label文本，进行显示即可。以下是示例代码： ``` <template> <el-select v-model="selected" multiple> <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option> </el-select> </template> <script> export default { data() { return { options: [ { id: 1, label: '选项1' }, { id: 2, label: '选项2' }, { id: 3, label: '选项3' }, { id: 4, label: '选项4' } ], selected: [] } }, watch: { selected(val) { console.log(val); let selectedLabels = []; val.forEach((item) => { let option = this.options.find((option) => { return option.id === item; }); if (option) { selectedLabels.push(option.label); } }); console.log(selectedLabels); // 进行显示操作 } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值