问题描述
我们再使用element的级联组件的时候会有这种情况,允许用户选择任意一级选项,当用户选择后需要调用后端接口,这时我们需要在组件上配置“change-on-select”,但是如果这个时候我们监控组件的change事件在其中做逻辑处理,只要值发生改变就会向后端发送请求,这样会增大后端接口的压力,所以我们不能这么做。然后我们 看到在Cascader组件中有blur事件,所以猜测可以监控blur事件,但是在使用过程中有两个问题。此文就是本人对这两个问题的解决方案。
- 选择一个值,blur事件会触发两次。
- 在blur事件中如果有ajax请求会导致菜单栏第一次点击无法关闭
问题1:解决方案
如下图:
第一次触发blur事件
第二次触发blur事件:
我们可以用一下方法解决此问题:
定义一个临时变量,当触发blur事件时我们判断v-model和临时变量的值是否一致,如果一致不做任何操作,不一致让临时变量等于v-model绑定的值同时执行代码逻辑。
代码如下:
if(this.organizId.length!=0&&this.tempOrganizId!=this.organizId[this.organizId.length-1]) {
this.tempOrganizId = this.organizId[this.organizId.length - 1];
//do some thing
}
问题2解决方案
当我们这么写完以后没有任何问题时开开心心的写后面的逻辑,发现当我们在代码里面写了和后端交互的逻辑,点击菜单栏第一次不关闭,需要点击两次。
问题二的解决方案:
我们在进行业务逻辑处理时写了一个定时任务,让菜单栏关闭后在开始逻辑处理,大概是200毫秒左后,最后不要忘记关闭定时器。代码如下:
if(this.organizId.length!=0&&this.tempOrganizId!=this.organizId[this.organizId.length-1]) {
this.tempOrganizId = this.organizId[this.organizId.length - 1];
//需要写一个定时器
let cascaderBox= setTimeout(()=>{
this.queryPage();
clearTimeout(cascaderBox);
},200)
}
}