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