【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题
目录
【问题描述】
【问题摘要】
【分析问题】
【完整Test代码】
【封装自定义指令】
↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~
【问题描述】
一位朋友遇到这么一个开发场景：在表格里面嵌入el-select组件，每次修改值后，失去焦点时将修改值提交后台保存，但是发现在el-select组件失去焦点时，blur事件的evt.target.value值总为前一次选择的值；
【问题摘要】
1、el-select组件失去焦点时需要获取组件当前值而不是上一次的值；
2、el-select组件切换选项时不提交后台，只有当组件失去焦点后才提交当前值；
【分析问题】
一刚开始以为是下拉框收起动画延时问题导致内部value值被延时修改，所以就在blur事件里延时获取evt.target.value,貌似没问题了
blurHandler(evt){setTimeout(() => {console.log(evt.target.value);},250)
},
随后又发现通过@blur绑定事件只会触发一次，好吧那就加修饰符吧：@blur.capture.native，好像解决只触发一次的问题了
<el-select v-model="value" @blur.capture.native="nativeBlurHandler" ref="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>
但是随之而来的问题就是，每次切换取值后都会触发一次blur事件，这可不是我们想要的，这不变成change事件了吗？继续深挖！
那就打印一下this.$refs.select看看吧，找到this.$refs.select.$data, 看里面有定义啥变量没,发现了如下变量：
log(eventName){let {createdSelected,inputHovering,isOnComposition,isSilentBlur,menuVisibleOnFocus,softFocus,visible} = this.$refs.select.$data;console.table([{name: eventName,value: '',},// {// name: 'createdSelected',// value: createdSelected// },{name: 'inputHovering',value: inputHovering},// {// name: 'isOnComposition',// value: isOnComposition// },{name: 'isSilentBlur',value: isSilentBlur},// {// name: 'menuVisibleOnFocus',// value: menuVisibleOnFocus// },// {// name: 'softFocus',// value: softFocus// },{name: 'visible',value: visible},])
}
通过反复测试发现只有inputHovering，isSilentBlur，visible这三个变量与el-select组件的focus,blur事件有关联：
通过上图可以发现，只有最下方的失去焦点事件才是我们想要的，此时visible==false，isSilentBlur==true,正好满足我们的判断条件,于是blur事件改造成这样了：
nativeBlurHandler(evt){console.log('nativeBlurHandler', {...this.$refs.select});let {isSilentBlur,visible} = this.$refs.select;if( isSilentBlur && !visible ) {console.log('提交', this.$refs.select.selected.currentValue);}this.log('blur事件');
},
又因为value取值从evt.target.value获取的不是实时的，也就是值不正确，继续深挖，发现this.$refs.select.selected.currentValue就是我们想要的正确的值，于是乎，问题就解决了！测试demo完整代码如下：
【完整Test代码】
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-select v-model="value" placeholder="请选择" @blur="blurHandler" @blur.capture.native="nativeBlurHandler" ref="select"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>let selectElm;new Vue({el: '#app',data: function() {return {options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}, {value: '龙须面',label: '龙须面'}, {value: '北京烤鸭',label: '北京烤鸭'}],value: ''}},methods: {focusHandler(evt){this.log('focus事件');},blurHandler(evt){setTimeout(() => {console.log(evt.target.value);},250)},nativeBlurHandler(evt){console.log('nativeBlurHandler', {...this.$refs.select});let {isSilentBlur,visible} = this.$refs.select;if( isSilentBlur && !visible ) {console.log('提交', this.$refs.select.selected.currentValue);}this.log('blur事件');},log(eventName){let {createdSelected,inputHovering,isOnComposition,isSilentBlur,menuVisibleOnFocus,softFocus,visible} = this.$refs.select.$data;console.table([{name: eventName,value: '',},// {// name: 'createdSelected',// value: createdSelected// },{name: 'inputHovering',value: inputHovering},// {// name: 'isOnComposition',// value: isOnComposition// },{name: 'isSilentBlur',value: isSilentBlur},// {// name: 'menuVisibleOnFocus',// value: menuVisibleOnFocus// },// {// name: 'softFocus',// value: softFocus// },{name: 'visible',value: visible},])}}})</script>
</html>【封装自定义指令】
想到给组件添加ref实际并不是那么好用且麻烦，所以我又将其封装成了指令，指令代码及用法如下，大家随取随用哈↓↓↓↓↓↓
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-row><el-col :span="24"><el-select v-select-blur="selectBlurHandler" v-model="value"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-col></el-row></div></body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>Vue.directive('select-blur', {bind: function(el, binding, vnode) {const selectComponent = vnode.componentInstance;if( selectComponent.$options.name === 'ElSelect' ) {selectComponent.$watch('visible', (n,o) => {const {isSilentBlur,visible,} = selectComponent;if(isSilentBlur && !visible) {selectComponent.handleBlur();}})selectComponent.$on('blur', () => {let {visible,selected: {currentValue}} = selectComponent;if (!visible) {binding?.value && typeof binding.value === 'function' && binding.value(currentValue);selectComponent.blur(); //处理页面频繁聚焦失焦导致重复触发blur事件的问题}}, true);}},unbind: function(el, binding, vnode) {const selectComponent = vnode.componentInstance;if( selectComponent.$options.name === 'ElSelect' ) {selectComponent.$off('blur');}}});const app = new Vue({el: '#app',data: function() {return {options: [{value: '黄金糕',label: '黄金糕'}, {value: '双皮奶',label: '双皮奶'}, {value: '蚵仔煎',label: '蚵仔煎'}, {value: '龙须面',label: '龙须面'}, {value: '北京烤鸭',label: '北京烤鸭'}],value: ''}},methods: {selectBlurHandler(val) {console.log('提交', val);},}})</script>
</html>相关文章：
【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题
目录 【问题描述】 【问题摘要】 【分析问题】 【完整Test代码】 【封装自定义指令】 ↑↑↑↑↑↑↑↑↑↑↑↑ 不想看解决问题过程的可点击上方【封装自定义指令】目录直接跳转获取结果即可~~~ 【问题描述】 一位朋友遇到这么一个开发场景：在表格里面嵌入el-…...
通过了PMP考试，还有什么证书值得考？
自从7月24号公布了PMP成绩后，不少伙伴私信小编：通过PMP后还有哪些证书可以提升自己？一来是多份高含金量的证书可以多点竞争力，二来是加持自己的职业发展！今天小编就来给大家捋一捋！ 一.NPDP认证 2016 年 4…...
页面技术基础-html
页面技术基础-html 环境准备：在JDBC中项目上完成代码定义 1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish 2. 在 Moudle上右键-》第二个选项：add framework .. -> 选择JavaEE下第一个选项 Web Apllicat…...
/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28‘ not found
某项目中，我要给别人封装一个深度学习算法的SDK接口，运行在RK3588平台上，然后客户给我的交叉编译工具链是 然后我用他们给我的交叉编译工具链报下面的错误： aarch64-buildroot-linux-gnu-gcc --version /data/chw/aarch64/bin/cca…...
解决SVN或GIT忽略提交文件的问题
背景 使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件。 git 在项目根目录新建文本文件，修改后缀为.gitignore 文件中添加内容 *.iml .project .gradle/ .idea/ target/ build/ .vscode/ .settings/ .facto…...
Django框架之路由用法
简介 路由简单的来说就是根据用户请求的 URL 链接来判断对应的处理程序，并返回处理结果，也就是 URL 与 Django 的视图建立映射关系。 Django 路由在 urls.py 配置，urls.py 中的每一条配置对应相应的处理方法。 Django 不同版本 urls.py 配…...
回文链表 LeetCode热题100
题目 给你一个单链表的头节点 head ，请你判断该链表是否为回文链表。如果是，返回 true ；否则，返回 false 。 思路 利用快慢指针找到链表中间节点，反转后半段链表。前半段从头节点开始与后半段比较。 注意当链表节点…...
如何在群晖NAS中使用cpolar内网穿透
如何在群晖nas中使用cpolar内网穿透 文章目录 如何在群晖nas中使用cpolar内网穿透 今天，我们来为大家介绍，如何在群晖系统中，使用图形化界面的cpolar。 cpolar经过图形化改造后，使用方法已经简便了很多，基本与其他应用…...
无头单向不循环链表和带头双向循环链表的创建
Lei宝啊：个人主页 愿所有美好不期而遇 前言： 接下来我们将会了解最基础的链表--->单链表 以及最方便也是最爽的链表--->带头双向循环链表。 若有看不懂之处，可画图或者借鉴这里：反转单链表，对于数据结构而言&am…...
超简单的fastapi链接websocket用例
main.py from typing import Listfrom fastapi import FastAPI, WebSocket, WebSocketDisconnectapp FastAPI()class ConnectionManager:def __init__(self):# 存放激活的ws连接对象self.active_connections: List[WebSocket] []async def connect(self, ws: WebSocket):# 等…...
MySQL详解
目录 一、MySQL 概述二、MySQL 安装和配置三、MySQL 基础语法四、MySQL 高级语法五、MySQL 性能优化六、MySQL 应用场景和实例七、MySQL 开发工具和插件八、MySQL 学习资源和社区 一、MySQL 概述 MySQL 是一种开源的关系型数据库管理系统，最初由瑞典的 MySQL AB 公…...
Vue [Day2]
指令修饰符 v-model.trim v-model.number 事件名.stop click.stop 事件名.prevent keyup.enter <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...
【前端｜Javascript第1篇】一文搞懂Javascript的基本语法
欢迎来到JavaScript的奇妙世界！作为前端开发的基石，JavaScript为网页增色不少，赋予了静态页面活力与交互性。如果你是一名前端小白，对编程一无所知，或者只是听说过JavaScript却从未涉足过，那么你来对了地方…...
【Linux命令200例】cp用于复制文件和目录（常用）
🏆作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。 🏆本文已收录于专栏：Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...
C高级_第二讲_shell指令和shell脚本_递归练习
思维导图 递归实现，输入一个数，输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…...
静态路由综合实验
实验拓扑如下： 实验要求如下： 【1】R6为isp，接口IP地址均为公有地址;该设备只能配置IP地址，之后不能再对其进行任何配置 【2】R1~R5为局域网，私有IP地址192.168.1.0/24，请合理分配 【3】所有路由器上环回…...
Spring核心IOC控制反转思想-----Spring框架
import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...
中小企业如何做好MES管理系统实施建设
中小企业在生产制造领域面临着诸多挑战，包括提升产品竞争力、规范生产制造等。为了应对这些挑战，越来越多的中小企业开始实施MES生产管理系统。然而，由于企业规模小、资源实力不足等原因，很多企业在实施MES管理系统时存在一定的困…...
java环境搭建 Ubuntu Linux
jdk的安装和配置环境变量 使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功 使用官网下载的jdk包 直接在百度上搜索jdk，选择图片这个 网址:jdk下载网址 若是arm就选择带有arm的，反之选择x64的&#…...
微信小程序使用mp-html遇到的问题并解决
1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具-->构建npm 然后就报错了 于是搜索到以下的内容： 没有找到可以构建的NPM包，请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...