el-cascader（聯機選擇器）動態加載+編輯默認值回顯
最近又在工作中遇到了一個問題，就是在我們使用el-cascader加載默認值的時候，如果我們無法拿到全部的options數據，cascader的輸入框和聯級選擇框都會遇到回顯問題（只能顯示第一層的數據），這個時候我們要怎么做呢，首先我們來看一下我們想要的效果
效果展示
先來看一下效果（由於我不太會用截屏動圖工具 所以分成2張）：
輸入框中的回顯數據
聯級選擇框中的已選數據
解決思路
其實cascader歸根結底也就是那么幾個屬性的事，我們首先來看一下文檔，這里列出了一些我們要用到的：
參數 說明
value / v-model 選中項綁定值
options 可選項數據源，鍵名可通過 Props 屬性配置
lazy 是否動態加載子節點，需與 lazyLoad 方法結合使用
lazyload 加載動態數據的方法，僅在 lazy 為 true 時有效
那么首先我們來分析一下問題,問題的原因是因為我們的接口無法提供給我們完全的樹形結構options數據，導致即使我們將獲取到的已選數據傳給v-model也加載不出來，所以我們要做的就是以下幾步：
1.獲取預選值
需要注意的是，我們這里獲取的預選值最好是我們通過el-cascader提交時的數組數據，即每一個數據都是帶有選擇路徑的數組，例如圖中的PMO，獲取的數據最好是[‘58集團’,‘技術功能平台群’,‘研發管理部’,‘PMO’],如果做不到這樣的形式，那我們無論如何也要從其他接口獲取到之前的路徑項（不然我們就只能從最基礎部分遍歷獲取全部的樹形結構了），而后我們需要將取得的集合合並為一個路徑群數組,如果和我是一樣的多選聯機選擇框，最好在獲取預選值的時候就是用promise
const queue = res.result.map(item => {
return new Promise(resolve => {
that.$axios.get('獲取預選值接口').then(data => {
resolve(data.單一路徑數組)
})
})
})
Promise.all(queue).then(result => {
result.forEach(i => {
that.路徑群數組.push(i)
})
})
2.根據預選值制作直線結構數據的數組對象
在我們拿到了想要的數據之后，我們需要將預選值規整為一個數組，並進行去重操作
路徑數組 = Array.from(new Set(that.路徑群數組.flat()))
1
這樣我們就得到了一個包含路徑中所有項的數組，注意：如果是多選型的cascader，那么在這個數組里就會有同級若干項數據，我們不用在意，遍歷數組並調用獲取下層數據的接口獲得下層數據res，並拼接成數組對象，這里要活用Promise，最后我們要的數據形式是（注意這里的pid是指每個數組上一層的父級id）
result = [{id: value1, Name: label1, children:res1 , pid: pid1},
{id: value2, Name: label2, children:res2 , pid: pid2},
{id: value3, Name: label3, children:res3 , pid: pid3}]
1
2
3
3.將直線結構的數組對象轉換為樹形結構
之后再將我們得到的數組對象轉化成樹形結構，網上有很多方法，這里我隨便貼一個：
var data = []
this.toTree(result, data, 0)
toTree (list, data, fatherId) {
list.forEach(item => {
if (item.pid === fatherId) {
var child = {
orgName: item.orgName,
id: item.id,
children: []
}
this.toTree(list, child.children, item.id)
data.push(child)
}
})
},
這樣一來我們就制作了一個包含預選項及其各個父級的樹形結構
4.將樹形結構賦值給options
將樹形結構賦值給options，這樣他就可以在最開始的文本框中加載出預選項，並且不影響其他選項動態加載的處理
Options = data
1
5.總結
最后要聲明一下，完成這樣效果的方法不止這一種，這是在我走了很多彎路之后做出來的，屬於笨辦法之一吧；
網上還有大佬說虛擬一個el-cascader的輸入框，將預選值放進去，點擊的時候再進行動態加載，這也是一種不錯的方法；
總之我個人感覺表達的不是很清晰，不過真的盡力了，大家如果有建議或者問題請給我留言，謝謝觀看
路徑：
https://blog.csdn.net/yzy13521758223/article/details/108055393?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link