Element-UI中<el-cascader?/>回顯失敗問題的完美解決
項目場景：
項目場景：接手了一些老項目，需要做一些日志相關(guān)的操作，從后臺日志跳轉(zhuǎn)到相應(yīng)頁面要帶上原來的請求參數(shù)，涉及到一個回顯問題
問題描述
Element-UI的 <el-cascader /> 這個組件，賦值之后它不會回顯！而且后端返回的值只有最后一級的id，可是一個勁看文檔、找資料浪費大半天，所以總結(jié)了一個比較完美的辦法
原因分析：
value 屬性才是回顯的關(guān)鍵，只有綁定了value屬性才會讓
<el-cascader />回顯（單選情況下是一維數(shù)組、多選是二維數(shù)組），而且數(shù)組中的值一定是最后一級的id加上它父級的id組成
在這里放一下模擬的數(shù)據(jù)
depart_check: [],
options: [
{
value: 1,
label: '東南',
children: [
{
value: 11,
label: '上海',
children: [{
value: 111,
label: '黃浦區(qū)'
}, {
value: 112,
label: '靜安區(qū)'
}, {
value: 113,
label: '虹口區(qū)'
}, {
value: 114,
label: '長寧區(qū)'
}]
}, {
value: 12,
label: '江蘇',
}, {
value: 13,
label: '浙江',
}
]
},
{
value: 2,
label: '西北',
children: [{
value: 21,
label: '陜西',
}, {
value: 22,
label: '新疆維吾爾族自治區(qū)',
}]
}
]
解決方案：
由于后端返回來的只有最后一級的id，所以我們需要寫一個遞歸來拿到最后一級id和它父級id的數(shù)組
廢話不多說直接上代碼
/*
* @param list 數(shù)據(jù)列表
* @param id 后端返回的id
**/
getParentsById(list, id) {
for (let i in list) {
if (list[i].value == id) {
//查詢到就返回該數(shù)組對象的value
return [list[i].value]
}
if (list[i].children) {
let node = this.getParentsById(list[i].children, id)
if (node !== undefined) {
//查詢到把父節(jié)把父節(jié)點加到數(shù)組前面
node.unshift(list[i].value)
return node
}
}
}
},
方法有了之后就開始解決問題
一、多選賦值回顯
因為多選的時候綁定的value是個二維數(shù)組
比如隨便選倆，change事件拿到的值就是[[1,11,111], [1,12] ]
// 選擇單位
handlechangedepatt(v) {
console.log(v)
this.depart_check = v
},
因為后端只會返回來111、12兩個值還是字符串格式
"111,12"，所以處理開始
let _depart_check = data.depart_id ? data.depart_id.split(",").map(i => Number(i)) : []
let _arr = []
// 使用上面寫的方法 getParentsById 找出父級id并組合
_depart_check && _depart_check.map(i => _arr.push(this.getParentsById(this.options, i)))
console.log("_arr: ",_arr)
this.depart_check = _arr
控制臺打印拿到的_arr，完美和change事件里拿到的值是一個格式，這樣回顯就完成了
這里有一個小問題就是，拿到的id可能很多個，getParentsById方法只能一個一個找父級id，所以需要依次獲取
二、單選賦值回顯
方法和多選類似，因為單選change選中的值是一位數(shù)組，比如：[ 1,11,111 ]所以當(dāng)拿到后端id之后不需要太多處理，只需要根據(jù)id和數(shù)據(jù)拿到一個一維數(shù)組的數(shù)據(jù)就行了，就不多解釋了
let _depart_check = data.depart_id || "" let _arr = [] _arr = this.getParentsById(this.options, _depart_check ) this.depart_check = _arr
總結(jié)
以上就是el-cascader回顯失敗的解決辦法，可能有些小地方不夠嚴(yán)謹(jǐn)，但是大問題得到了解決。
到此這篇關(guān)于Element-UI中<el-cascader />回顯失敗問題的完美解決的文章就介紹到這了,更多相關(guān)el-cascader回顯失敗解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了如何解決vue在ios微信"復(fù)制鏈接"功能問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實踐的疑難,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)目錄樹結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue.use()主要用于注冊全局插件,當(dāng)插件具有install方法時,調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊全局變量,這些變量在項目任何位置都可以通過this.$變量名訪問,兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量2024-10-10
這篇文章主要介紹了詳解新手使用vue-router傳參時注意事項，詳細(xì)的介紹了幾種常見錯誤，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
今天小編就為大家分享一篇vue完成項目后,打包成靜態(tài)文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Vue3中使?echarts?圖表寬度自適應(yīng)變化的操作方法
本文介紹了在Vue3中使用ECharts時,如何使圖表容器寬度自適應(yīng)頁面大小,通過修改模板中的div樣式,將寬度設(shè)置為100%,并監(jiān)聽窗口大小變化事件,調(diào)用ECharts實例的resize方法,實現(xiàn)圖表的自適應(yīng)調(diào)整,感興趣的朋友跟隨小編一起看看吧2025-02-02
Vue+webpack項目配置便于維護(hù)的目錄結(jié)構(gòu)教程詳解
新建項目的時候創(chuàng)建合理的目錄結(jié)構(gòu)便于后期的維護(hù)是很重要。這篇文章主要介紹了Vue+webpack項目配置便于維護(hù)的目錄結(jié)構(gòu) ,需要的朋友可以參考下2018-10-10
VUE v-model表單數(shù)據(jù)雙向綁定完整示例
這篇文章主要介紹了VUE v-model表單數(shù)據(jù)雙向綁定,結(jié)合完整實例形式分析了vue.js實現(xiàn)表單數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2019-01-01