詳解element-ui級(jí)聯(lián)菜單(城市三級(jí)聯(lián)動(dòng)菜單)和回顯問(wèn)題
代碼最下面
各項(xiàng)的參數(shù)截圖
代碼如下
<el-form-item label="戶籍所在地" prop="censusLand" style="padding-left:57px"> <el-cascader v-model="ruleForm.censusLand" style="width:180px;padding-left:7px;width:270px" placeholder="請(qǐng)選擇省市區(qū)" :options="cascaderData1" @expand-change="censusLandChange" :props="{ value: 'id', label: 'name', children: 'cities' }" ></el-cascader> </el-form-item>
data (){ retutn { ruleForm: { censusLand // 雙向綁定 }, cascaderData1: [], // 戶籍省 一級(jí)菜單 } }
// 戶籍所在地-選中后下一級(jí) censusLandChange(val) { this.getCensusLand(val); },
// 戶籍所在地 getCensusLand(val) { // console.log(val); let idArea; let sizeArea; if (!val) { idArea = null; sizeArea = 0; } else if (val.length === 1) { idArea = val[0]; sizeArea = val.length; // 3:一級(jí) 4:二級(jí) 6:三級(jí) } else if (val.length === 2) { idArea = val[1]; sizeArea = val.length; // 3:一級(jí) 4:二級(jí) 6:三級(jí) } this.$get( "/stu/student/getAreaId", { AreaId: idArea }, res => { // console.log("1111",res); if (sizeArea === 1) { // 點(diǎn)擊一級(jí) 加載二級(jí) 市 this.cascaderData1.map((value, i) => { if (value.id === val[0]) { if (!value.cities.length) { value.cities = res.data.map((value, i) => { return { id: value.id, name: value.name, cities: [] }; }); } } }); } else if (sizeArea === 2) { // 點(diǎn)擊二級(jí) 加載三級(jí) 區(qū) this.cascaderData1.map((value, i) => { if (value.id === val[0]) { value.cities.map((value, i) => { if (value.id === val[1]) { if (!value.cities.length) { value.cities = res.data.map((value, i) => { return { id: value.id, name: value.name }; }); } } }); } }); } // console.log(this.ruleForm.censusLand); }, err => {} ); },
回顯時(shí),注意要同步(通過(guò)new Promise)
this.getAllMe(); // 先獲取一級(jí)的城市
// 在回顯數(shù)據(jù)的res 里放入這段代碼(視情況而定) // 需要先加載市級(jí)菜單,再去加載省級(jí)的() // 戶口所在地 new Promise((resolve, reject) => { let val = [res.data.getupdate.domicileProvinceId]; let idArea; let sizeArea; if (!val) { idArea = null; sizeArea = 0; } else if (val.length === 1) { idArea = val[0]; sizeArea = val.length; // 3:一級(jí) 4:二級(jí) 6:三級(jí) } this.$get( "/stu/student/getAreaId", { AreaId: idArea }, res => { // console.log("1111", res); if (sizeArea === 1) { // 點(diǎn)擊一級(jí) 加載二級(jí) 市 this.cascaderData1.map((value, i) => { if (value.id === val[0]) { if (!value.cities.length) { value.cities = res.data.map((value, i) => { return { id: value.id, name: value.name, cities: [] }; }); } } }); } resolve(res); }, err => { reject(err); } ); }) .then(data => { // 通過(guò)他們?nèi)カ@取第三級(jí)的 this.getCensusLand([ res.data.getupdate.domicileProvinceId, // 一級(jí) res.data.getupdate.domicileCityId // 二級(jí) ]); // 戶口所在地 }) .catch(err => { console.log(err); });
最后再雙向綁定給censusLand
// 戶籍 censusLand: [ res.data.getupdate.domicileProvinceId * 1, res.data.getupdate.domicileCityId * 1, res.data.getupdate.domicileDistrictId * 1 ],
大概就這些了,希望對(duì)大家有幫助。也希望大家多多支持腳本之家。
相關(guān)文章
vue主動(dòng)刷新頁(yè)面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動(dòng)刷新頁(yè)面及列表數(shù)據(jù)刪除后的刷新實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能,本文通過(guò)提問(wèn)兩個(gè)問(wèn)題帶領(lǐng)大家一起學(xué)習(xí)整個(gè)過(guò)程,需要的朋友可以參考下2018-06-06解決Vue.js Devtools未檢測(cè)到Vue實(shí)例的問(wèn)題
在開(kāi)發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會(huì)遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識(shí)別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問(wèn)題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下2024-01-01Vue3中關(guān)于ref和reactive的區(qū)別分析
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-06-06用vue和node寫(xiě)的簡(jiǎn)易購(gòu)物車(chē)實(shí)現(xiàn)
這篇文章主要介紹了用vue和node寫(xiě)的簡(jiǎn)易購(gòu)物車(chē)實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04vue使用axios跨域請(qǐng)求數(shù)據(jù)問(wèn)題詳解
這篇文章主要為大家詳細(xì)介紹了vue使用axios跨域請(qǐng)求數(shù)據(jù)的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法,reactive的用法與ref的用法相似,也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新,這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
這篇文章主要介紹了vue頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09