本地三级联动适用于 element 三个下拉框

最新推荐文章于 2025-06-30 09:32:22 发布

转载最新推荐文章于 2025-06-30 09:32:22 发布 · 1.1k 阅读

本文介绍了一种从远程JSON资源获取省市县数据，并通过正则表达式进行数据分类的方法。详细展示了如何使用axios获取JSON数据，然后将数据分为省份、城市和区域三个级别，并进行嵌套处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本地三级联动 json资源地址：
https://download.youkuaiyun.com/download/weixin_43138190/10812629

getCityData: function() {
var that = this
axios.get(this.mapJson).then(function(response) {
if (response.status == 200) {
var data = response.data
that.province = []
that.city = []
that.block = []
// 省市区数据分类
for (var item in data) {
if (item.match(/0000$/)) { //省
that.province.push({
label: data[item],
item:item,
value: data[item],
children: []
})
} else if (item.match(/00$/)) { //市
that.city.push({
label: data[item],
item:item,
value: data[item],
children: []
})
} else { //区
that.block.push({
label: data[item],
item:item,
value: data[item]
})
}
}
// 分类市级
for (var index in that.province) {
for (var index1 in that.city) {
if (that.province[index].item.slice(0, 2) === that.city[index1].item.slice(0, 2)) {
that.province[index].children.push(that.city[index1])
}
}
}
// 分类区级
for (var item1 in that.city) {
for (var item2 in that.block) {
if (that.block[item2].item.slice(0, 4) === that.city[item1].item.slice(0, 4)) {
that.city[item1].children.push(that.block[item2])
}
}
}
} else {
console.log(response.status)
}
}).catch(function(error) {
console.log(typeof + error)
})
},