詳解element-ui級聯(lián)菜單（城市三級聯(lián)動菜單）和回顯問題
更新時間：2019年10月02日 10:04:15 作者：VUEJS
這篇文章主要介紹了詳解element-ui級聯(lián)菜單（城市三級聯(lián)動菜單）和回顯問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
代碼最下面
各項的參數(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 => {
// 通過他們?nèi)カ@取第三級的
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 ],
大概就這些了，希望對大家有幫助。也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.js自定義組件directives的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)模態(tài)框組件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue cli 3.x 項目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項目部署到 github pages的方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)側(cè)邊定位欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)發(fā)表評論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
Vue-Router實現(xiàn)組件間跳轉(zhuǎn)的三種方法
這篇文章主要為大家詳細(xì)介紹了Vue-Router來實現(xiàn)組件間跳轉(zhuǎn)的三種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vite處理html模板插件之vite-plugin-html插件使用
這篇文章主要給大家介紹了關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的相關(guān)資料,Vite是一個現(xiàn)代化的前端構(gòu)建工具,而vite-plugin-html是Vite的一個插件,用于在構(gòu)建時自動生成HTML文件,需要的朋友可以參考下2023-10-10
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實現(xiàn)watch（有意思），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08