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

问题描述

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

1. 选择一个值，blur事件会触发两次。
2. 在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)
                }
            }