该博客内容展示了如何在 Vue 中实现一个动态加载的多级地区选择组件。通过调用 API 获取不同层级的地区数据，并根据选中项的变化逐级加载下级地区，实现了从根节点到第五级子节点的无缝切换。该组件适用于需要多级地区选择的场景，如地址选择等。
:options="options"
expand-trigger="hover"
@active-item-change="handleItemChange"
@change="handleChange"
:props="props"
style="width:530px;" >
import API from '@/api'
export default {
name: 'area-select',
data () {
return {
options:[],
values:'',
texts:'',
props:{
value: 'id',
label:'name',
children: 'cities'
}
}
},
created () {
},
mounted(){
let page = this;
page.getCNodes('根',[]);
},
methods: {
getCNodes (parentid,currentIds) {
// console.log('加载下级节点')
let page = this;
let currentIdsSize = currentIds.length;
// console.log(currentIdsSize)
API.area.findChildren({
tyear:2016,
parentid:parentid
}).then(function (res) {
let cities = new Array();
res.forEach(function(r){
if(r.depth < 5){
cities.push({id:r.id,name:r.name,cities:[]});
}else{
cities.push({id:r.id,name:r.name});
}
});
if(currentIdsSize === 0){
page.options = cities;
}else if(currentIdsSize === 1){
page.options.forEach(function(r,index){
if(r.id === currentIds[0]){
page.options[index].cities = cities;
}
});
}else if(currentIdsSize === 2){
page.options.forEach(function(r0,i0){
if(r0.id === currentIds[0]){
page.options[i0].cities.forEach(function(r1,i1){
if(r1.id === currentIds[1]){
page.options[i0].cities[i1].cities = cities;
}
});
}
});
}else if(currentIdsSize === 3){
page.options.forEach(function(r0,i0){
if(r0.id === currentIds[0]){
page.options[i0].cities.forEach(function(r1,i1){
if(r1.id === currentIds[1]){
page.options[i0].cities[i1].cities.forEach(function(r2,i2){
if(r2.id === currentIds[2]){
page.options[i0].cities[i1].cities[i2].cities = cities;
}
});
}
});
}
});
} else if(currentIdsSize === 4){
page.options.forEach(function(r0,i0){
if(r0.id === currentIds[0]){
page.options[i0].cities.forEach(function(r1,i1){
if(r1.id === currentIds[1]){
page.options[i0].cities[i1].cities.forEach(function(r2,i2){
if(r2.id === currentIds[2]){
page.options[i0].cities[i1].cities[i2].cities.forEach(function(r3,i3){
if(r3.id === currentIds[3]){
page.options[i0].cities[i1].cities[i2].cities[i3].cities = cities;
}
});
}
});
}
});
}
});
}
})
.catch(function (error) {
});
},
handleItemChange(val){
this.values = val;
// console.log(val)
let valSize = val.length;
let page = this;
if(valSize === 1){
//第2级节点获取
page.options.forEach(function(r,index){
if(r.id === val[0]){
page.getCNodes(r.id,val);
return;
}
});
}
if(valSize === 2){
//第3级节点获取
page.options.forEach(function(r,index){
if(r.id === val[0]){
r.cities.forEach(function(r0,i0){
if(r0.id === val[1]){
page.getCNodes(r0.id,val);
return;
}
});
}
});
}
if(valSize === 3){
//第4级节点获取
page.options.forEach(function(r0,i0){
if(r0.id === val[0]){
r0.cities.forEach(function(r1,i1){
if(r1.id === val[1]){
r1.cities.forEach(function(r2,i2){
if(r2.id === val[2]){
page.getCNodes(r2.id,val);
return;
}
});
}
});
}
});
}
if(valSize === 4){
//第5级节点获取
page.options.forEach(function(r0,i0){
if(r0.id === val[0]){
r0.cities.forEach(function(r1,i1){
if(r1.id === val[1]){
r1.cities.forEach(function(r2,i2){
if(r2.id === val[2]){
r2.cities.forEach(function(r3,i3){
if(r3.id === val[3]){
page.getCNodes(r3.id,val);
return;
}
});
}
});
}
});
}
});
}
},
handleChange (v){
let page = this;
page.options.forEach(function(r0,i0){
if(r0.id === v[0]){
page.values = r0.id;
page.texts = r0.name;
r0.cities.forEach(function(r1,i1){
if(r1.id === v[1]){
page.values += ','+r1.id;
page.texts += ','+r1.name;
r1.cities.forEach(function(r2,i2){
if(r2.id === v[2]){
page.values += ','+r2.id;
page.texts += ','+r2.name;
r2.cities.forEach(function(r3,i3){
if(r3.id === v[3]){
page.values += ','+r3.id;
page.texts += ','+r3.name;
r3.cities.forEach(function(r4,i4){
if(r4.id === v[4]){
page.values += ','+r4.id;
page.texts += ','+r4.name;
}
});
}
});
}
});
}
});
}
});
}
}
}
扫一扫
2400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
