問題描述

我們再使用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)
                }
            }