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


Posted in Vue.js onNovember 17, 2020

如下所示:

<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>

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

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

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.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
You might like
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
js实现上传图片之上传前预览图片
2013/03/25 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Python堆排序原理与实现方法详解
2018/05/11 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
为什么python比较流行
2020/06/19 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
汽车促销活动方案
2014/03/31 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
python删除csv文件的行列
2021/04/06 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
vue ref如何获取子组件属性值
2022/03/31 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python