解决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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue使用watch监听属性变化
Apr 30 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP循环结构实例讲解
2014/02/10 PHP
PHP生成条形图的方法
2014/12/10 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP中Array相关函数简介
2016/07/03 PHP
PHP实现倒计时功能
2020/11/16 PHP
pace.js页面加载进度条插件
2015/09/29 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python中requests小技巧
2017/05/10 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
职称自我鉴定
2013/10/15 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
人事文员岗位职责
2014/02/16 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
爱心捐书活动总结
2014/07/05 职场文书
法制教育演讲稿
2014/09/10 职场文书
2015年科协工作总结
2015/05/19 职场文书
党支部评议意见
2015/06/02 职场文书
Redis 异步机制
2022/05/15 Redis
python双向链表实例详解
2022/05/25 Python