解决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 相关文章推荐
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
Script的加载方法小结
2011/01/12 Javascript
jquery对表单操作2
2011/04/06 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
weblogic面试题
2016/03/07 面试题
兼职学生的自我评价
2013/11/24 职场文书
学校志愿者活动总结
2014/06/27 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
python b站视频下载的五种版本
2021/05/27 Python
mysql的数据压缩性能对比详情
2021/11/07 MySQL
Python jiaba库的使用详解
2021/11/23 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang