解决vue elementUI 使用el-select 时 change事件的触发问题

 更新时间:2020年11月17日 15:08:07   作者:一航  
这篇文章主要介绍了解决vue elementUI 使用el-select 时 change事件的触发问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()">
 <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value"></el-option>
 </el-select>

我们需要的是选择之后才触发,但是这样写你会发现,页面初始化的时候会触发多次,选择之后又会触发多次,原因是我们用错了标签,应该用 @change="selectChange()

 <el-select v-model="level" size="mini" placeholder="请选择" @change="selectChange()">
 <el-option v-for="item in select" :key="item.value" :label="item.label" :value="item.value"></el-option>
 </el-select>

这样写就可以了,v-bind的缩写是:,v-on的缩写是@,这里是触发事件,应该用@,

补充知识:为elment-ui的el-select选择器添加onblur失焦事件产生的问题

如下所示:

<div class="oneline">
     <span >用户编号:</span>
     <div class="block left">
      <el-select
      :no-match-text="msg"
      :popper-append-to-body=false
      placeholder='请选择'
      v-model="value" filterable popper-class='contentadd_select' 
      ref='select'>
       <el-option
        v-for="item in users"
        :key="item.accont"
        :label="item.accont"
        :value="item.accont">
       </el-option>
      </el-select>
     </div>
    </div>

所需要实现的功能是当查询输入时,如果用户输入的数据是选项里面不匹配的,则返回显示无匹配数据。

JS代码如下

this.$refs.select.$refs.reference.$refs.input.onblur = ()=>{
    let haveitem=0;
    for(let i=0;i<this.users.length;i++){
     if(this.$refs.select.query==this.users[i].accont){
      haveitem++;
     }
    }
    if(!haveitem){
     this.value='无匹配数据'
     // this.msg=' '
    }
  }

上述代码的this.$refs.select.query是选择器输入时查询框绑定的值。

选择器属性有filterable属性时为可查询选择。

使用开发者工具测试时发现el-select选择器数据绑定的对象value跟查询输入时的数据对象不是同一个,然后查看el-select源码得知查询输入时的数据绑定在select.query上。

本来el-select有个blur事件绑定函数属性。但是使用后发现有时候失焦事件并不能触发生效,也就导致所绑定的函数不能执行。

看了源码得知blur这个事件函数有个定时器什么的,看不太懂,但是知道不是浏览器原生的失焦事件。

于是用vue的ref定位到该选择器来实现绑定原生onblur事件,则可以避免这个问题。

也可以使用操作dom查询利用选择器定位到这个选择器进行失焦事件绑定。

以上这篇解决vue elementUI 使用el-select 时 change事件的触发问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧
    2023-10-10
  • VueCli3中兼容IE11配置的艰苦历程

    VueCli3中兼容IE11配置的艰苦历程

    这篇文章主要介绍了VueCli3中兼容IE11配置的艰苦历程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Element Table 自适应高度的实现示例

    Element Table 自适应高度的实现示例

    el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下Element Table 自适应高度,感兴趣的可以了解一下
    2024-07-07
  • springboot+VUE实现登录注册

    springboot+VUE实现登录注册

    这篇文章主要为大家详细介绍了springboot+VUE实现登录注册,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue项目新一代状态管理工具Pinia的使用教程

    Vue项目新一代状态管理工具Pinia的使用教程

    pinia是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,下面这篇文章主要给大家介绍了关于Vue项目新一代状态管理工具Pinia的使用教程,需要的朋友可以参考下
    2022-11-11
  • VueQuillEditor富文本上传图片(非base64)

    VueQuillEditor富文本上传图片(非base64)

    这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue2和vue3部署到服务器子目录为空白页问题及解决

    vue2和vue3部署到服务器子目录为空白页问题及解决

    这篇文章主要介绍了vue2和vue3部署到服务器子目录为空白页问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue实现动态表格提交参数动态生成控件的操作

    vue实现动态表格提交参数动态生成控件的操作

    这篇文章主要介绍了vue实现动态表格提交参数动态生成控件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 构建Vue3桌面应用程序的方法

    构建Vue3桌面应用程序的方法

    在项目中会用到 Electron , 一种最流行的框架,可使用Javascript构建跨平台的桌面应用程序。在本文中,我们将研究如何通过 Vite 开发 Vue 3 桌面项目,感兴趣的可以了解一下
    2021-05-05
  • Vue路由重定向和别名的示例代码

    Vue路由重定向和别名的示例代码

    在Vue.js应用开发中,Vue Router 提供了许多特性来简化前端路由管理和用户体验,其中一个重要的特性便是路由重定向和别名,它们可以帮助我们更好地管理和组织路由,本文将详细介绍如何在Vue Router中使用路由重定向和别名,需要的朋友可以参考下
    2024-09-09

最新评论