Elementui的级联选择器在blur事件调用接口无法关闭菜单

问题描述

我们再使用element的级联组件的时候会有这种情况&＃xff0c;允许用户选择任意一级选项&＃xff0c;当用户选择后需要调用后端接口&＃xff0c;这时我们需要在组件上配置“change-on-select”&＃xff0c;但是如果这个时候我们监控组件的change事件在其中做逻辑处理&＃xff0c;只要值发生改变就会向后端发送请求&＃xff0c;这样会增大后端接口的压力&＃xff0c;所以我们不能这么做。然后我们 看到在Cascader组件中有blur事件&＃xff0c;所以猜测可以监控blur事件&＃xff0c;但是在使用过程中有两个问题。此文就是本人对这两个问题的解决方案。

1. 选择一个值&＃xff0c;blur事件会触发两次。
2. 在blur事件中如果有ajax请求会导致菜单栏第一次点击无法关闭

问题1&＃xff1a;解决方案

如下图&＃xff1a;
第一次触发blur事件

第二次触发blur事件&＃xff1a;

我们可以用一下方法解决此问题&＃xff1a;
定义一个临时变量&＃xff0c;当触发blur事件时我们判断v-model和临时变量的值是否一致&＃xff0c;如果一致不做任何操作&＃xff0c;不一致让临时变量等于v-model绑定的值同时执行代码逻辑。
代码如下&＃xff1a;

if(this.organizId.length!&＃61;0&&this.tempOrganizId!&＃61;this.organizId[this.organizId.length-1]) {this.tempOrganizId &＃61; this.organizId[this.organizId.length - 1];//do some thing}


问题2解决方案

当我们这么写完以后没有任何问题时开开心心的写后面的逻辑&＃xff0c;发现当我们在代码里面写了和后端交互的逻辑&＃xff0c;点击菜单栏第一次不关闭&＃xff0c;需要点击两次。
问题二的解决方案&＃xff1a;
我们在进行业务逻辑处理时写了一个定时任务&＃xff0c;让菜单栏关闭后在开始逻辑处理&＃xff0c;大概是200毫秒左后&＃xff0c;最后不要忘记关闭定时器。代码如下&＃xff1a;

if(this.organizId.length!&＃61;0&&this.tempOrganizId!&＃61;this.organizId[this.organizId.length-1]) {this.tempOrganizId &＃61; this.organizId[this.organizId.length - 1];//需要写一个定时器let cascaderBox&＃61; setTimeout(()&＃61;>{this.queryPage();clearTimeout(cascaderBox);},200)}}