解決element-ui2.10.x版本以上使用遠端搜尋的Bug

林河發表於2019-11-11
UI

公司開發一個專案用到了element-ui中的Select元件的遠端搜尋功能，出現了一個在反覆搜尋時會重置以前選中的項是它的label變成value的情況，這是一個不得不解決的bug，分享出我的解決辦法供參考。

先看一下bug(下圖)，在搜尋到一些項選中後，再搜尋其他的項選中的情況下，之前選中的會變成我繫結的options裡的value。

解決element-ui2.10.x版本以上使用遠端搜尋的Bug

首先我想到的會不會是我引用元件的方式不對，或者在選擇器上繫結了change事件引發的，經過一系列的仔細排查後，我發現並不是我的方式有什麼不對。然而當我複製這個元件在其他相似專案中使用的時候卻發現並沒有什麼問題，這幫我定位到問題的根源---element-ui版本引發的bug。然後找到根源，解決起來也並不容易。

開啟專案中的package.json檔案，兩個專案中的eleme版本好像沒有不同-->"element-ui": "^2.9.1"。

不死心，開啟node_modules中的原始檔對比，發現果然不對，其實上面的版本指的是下載2.9.1以上的版本，我寫這篇文件的時候已經是2.12.0了，而在2.9.1版本上確實沒這樣的問題。本來想切換到2.9.1了事，然鵝測試小姐姐說又有問題了（級聯選擇器在2.9.1上的bug），專案裡用到級聯選擇器的地方比較多，毫不猶豫切換回新版本，還是想辦法解決遠端搜尋的bug吧！

解決方法

經過一番在element-ui的issue上的搜尋後，發現指出這個bug的人不少，但真正有解決辦法的並不多，最後找到一個比較靠譜的，思路就是把前一次選中的保留下來與搜尋到的合併，靠譜！

但是照搬過來卻不如人意，經過一番優化後程式碼如下：

// 已選中項
const selectedOptions = this.brandOptions.filter(item => this.formModel.brand.includes(item.value))
if (query.trim() === '') {
    this.brandOptions = selectedOptions
    return
}
this.brandLoading = true
// 封裝的AJAX方法
this.$httpAgent.GET({
    url: '/api/xxx.json',
    data: { brandName: query },
    success: (res) => {
        this.brandLoading = false
        // 新選項
        const brandOptions = res.data
        // 合併已選中項，解決element 2.12.0的問題
        // value組成的陣列
        const brandOptionsValue = brandOptions.map(item => item.value)
        // 找出在brandOptions中不存在的selectedOptions的項
        const otherOptions = selectedOptions.filter(item1 => !(brandOptionsValue.some(item2 => item1.value === item2)))
        // 合併陣列
        this.brandOptions = brandOptions.concat(otherOptions)
    }
})
複製程式碼

相關文章