1. 程式人生 > 其它 >vue-treeselect 直接賦值後,後面跟(unknown)的解決辦法

vue-treeselect 直接賦值後,後面跟(unknown)的解決辦法

專案中場景:

專案中有這樣的一個彈框,這裡面的表單元素都是動態生成的,我自己封裝的有一個表單元件。

輸入框和普通的 select 下拉框用的都是 elementui 框架裡面的東西,只有下拉樹結構用的是 vue-treeselect 外掛。

新增頁面沒問題,下拉框的資料都是 select 獲取焦點的時候才請求介面,然後渲染資料。但是編輯頁面是從介面獲取業務資料(業務資料是指帶有值的表單元素)直接賦值的,elementui 的輸入框和 select 下拉框都沒問題,但是 vue-treeselect 直接賦值(中文值)後面就會跟 (unknown)

上網搜文章,很多文章說的都是頁面初始載入的時候,下拉框裡面只有(unknown)

,只要把雙向繫結資料改為 null 就可以了。與我碰到的問題不一樣,我這個是編輯頁面,直接賦值之後,後面跟(unknown) 的情況。

參考treeSelect賦值後,後面跟(unknown)這篇文章之後,瞭解到vue-treeselect 是必須有下拉框的資料,直接賦值的時候,必須賦值 ID ,然後外掛通過 ID 去匹配下拉框裡面的資料,顯示出 ID 所對應的中文內容。

但是我這裡是沒有下拉框資料的,因為下拉框資料是 select 下拉框獲取焦點的時候,才去請求介面資料渲染下拉框的選項。而且我動態生成表單的時候,也沒辦法給下拉框的樹結構單獨請求介面,裡面涉及到陣列的迴圈,還有請求介面的非同步賦值,導致最後賦值的下拉框資料都是最後一項(如果不清楚這一點,可以參考這篇文章:

js之常見問題--for迴圈中為什麼點選總是彈出最後一個i)。

解決方案:

先上程式碼截圖:

表單元件中,下拉樹結構的資料繫結的是 item.options ,所以編輯介面的時候,直接生成一個 options選項,裡面只有一項資料,就是要繫結的資料,然後賦值的時候,直接賦值 guid 即可。

注意,這裡不能直接賦值 name 了,也就是不能直接賦值中文,不然還是會出現 (unknown)的情況,必須賦值 guid ,外掛自己會通過 guid 去下拉選項中尋找 guid 對應的中文 name

vue-treeselect 官網的下拉選項用的是 idlabel ,我這裡根據專案需求用的是 guid

name,因為我用normalizer 轉化了一下,如下圖:

------------ 完結------------