vue elementUI下拉框值无法选中问题及解决方案

 更新时间:2024年03月20日 10:48:17   作者:一名技术极客  
大家在写系统的时候,会有这样的需求:点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧

vue elementUI下拉框值无法选中问题

大家在写系统的时候,会有这样的需求:点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框。

展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了。在修改的时候,大家会发现下拉框选择不了,出现这问题的原因就是视图更新不够及时,在下拉框绑定一个change事件,写入this.$forceUpdate()就不会出现问题了

<el-form-item label="游戏">
    <el-select v-model="form.gamesId" filterable placeholder="请选择" @change="changeGame">
        <el-option v-for="item in gameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>
this.form.gamesId = res.data.gamesId // 点击修改后请求接口,将值赋给下拉框绑定的变量 这样会有视图更新不及时的问题
changeGame(id){
    this.$forceUpdate() //在下拉框上绑定change事件 更新视图 这样就不会有视图更新的问题
},

多选框。多选框不像单选框只要直接赋值进去就可已,还需要做进一步处理

<el-form-item label="标签" prop="label">
    <el-select v-model="form.label" multiple collapse-tags placeholder="请选择">
         <el-option v-for="item in labels" :key="item.id" :label="item.name" :value="item.name">
        </el-option>
    </el-select>
</el-form-item>
// this.form.label:下拉框绑定值 this.labels:下拉框内所有数据
let arr=[]
this.form.label.forEach(val=>{
    this.labels.forEach(item=>{
        if(val==item.id){
            arr.push(item.name);
        }
    })
})
this.form.label=arr

扩展:

解决element-ui的下拉框有值,点击后却无法选中的问题

出现原因

因为下拉列表的数据是根据输入框的值的变化时行实时调用接口来更新而非不变的,频繁的更新,可能造成点击下拉列表中的某项后,select所绑定的value值无法进行及时的更新,尤其是所绑定的值是对象时(vue不能检测对象属性的变化),更加会造成无法选中的问题。

解决方法

无法及时更新,那么用change事件监听值的变化,调用this.$forceUpdate()手动强制更新,重新渲染。

代码如下

<el-select v-model="value" placeholder="请选择"  @change="change()">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
change(){
      this.$forceUpdate()
  },

参考链接 https://segmentfault.com/a/1190000020744277

到此这篇关于vue elementUI下拉框值无法选中问题的文章就介绍到这了,更多相关vue elementUI下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 使用moment获取当前时间及一月前的时间

    vue 使用moment获取当前时间及一月前的时间

    开发中会有要获取当前日期的需求,有的是获取到当前月份,本文就介绍了vue获取当前日期时间(moment、new Date()),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2023-08-08
  • 在Vue组件化中利用axios处理ajax请求的使用方法

    在Vue组件化中利用axios处理ajax请求的使用方法

    这篇文章主要给大家介绍了在Vue组件化中利用axios处理ajax请求的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • vue跨域解决方法

    vue跨域解决方法

    这篇文章主要介绍了vue跨域解决方法 ,需要的朋友可以参考下
    2017-10-10
  • vue3下watch的使用方法示例

    vue3下watch的使用方法示例

    vue3中的watch是一个组合式的API使用时需要引入,下面这篇文章主要给大家介绍了关于vue3下watch使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue中 根据判断条件添加一个或多个style及class的写法小结

    vue中 根据判断条件添加一个或多个style及class的写法小结

    这篇文章主要介绍了vue中 根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解,需要的朋友可以参考下
    2023-03-03
  • 简单的vuex 的使用案例笔记

    简单的vuex 的使用案例笔记

    这篇文章主要介绍了简单的vuex 的使用案例笔记,本文通过demo 是一个 改变 app 的模式 的一个appellation ,选择是 夜间模式还是白天模式,具体代码大家参考下本文
    2018-04-04
  • Vue ECharts简易实现雷达图

    Vue ECharts简易实现雷达图

    这篇文章主要介绍了基于Vue ECharts简易实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue在body和query中如何向后端传参

    vue在body和query中如何向后端传参

    这篇文章主要介绍了vue在body和query中如何向后端传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 浅谈ElementUI中switch回调函数change的参数问题

    浅谈ElementUI中switch回调函数change的参数问题

    今天小编就为大家分享一篇浅谈ElementUI中switch回调函数change的参数问题,具有很好的价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 全站最详细的Vuex教程

    全站最详细的Vuex教程

    vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了全站最详细的Vuex教程,需要的朋友可以参考下
    2018-04-04

最新评论