由于在工作中使用Element做后台前端，Vant做前台前端，所以在涉及到省市级联的时候需要对数据进行统一处理，避免出现数据不对应的情况。在参考了Element和Vant的省市级联，选择统一使用Vant的省市级联数据，并在Element中开发省市级联功能，代码如下：
1、引入Vant提供的省市区列表数据
import areaList from "@/utils/area"
源码：https://github.com/youzan/vant/blob/dev/src/area/demo/area.js
2、对数据进行处理，以符合Element的Cascader 级联选择器规范
areaFormat(){
let _this =this,cityNum ='',countyNum =''
for (let p in areaList.province_list) {
let province_option = {
value:p,
label: areaList.province_list[p],
children: []
}
this.areaOptions.push(province_option)
}
for (let c in areaList.city_list){
let city_option = {
value:c,
label: areaList.city_list[c],
children: []
}
//城市与省会的索引差介于100到10000
this.areaOptions.map((item, index) => {
let diff = c - parseInt(item.value)
if(diff <10000 &&diff >99 && index <34){
_this.areaOptions[index].children.push(city_option)
}
//这里是外国数据
if(index >33 &&c >900000) {
_this.areaOptions[index].children.push({
value:c,
label: areaList.city_list[c]
})
}
})
}
//城市与城区的索引差小于100
for (let t in areaList.county_list){
let county_option = {
value:t,
label: areaList.county_list[t]
}
this.areaOptions.map((item, index) => {
item.children.map((itemChild, indexChild) => {
let diff =t -parseInt(itemChild.value)
if(diff >0 &&diff <99){
_this.areaOptions[index].children[indexChild].children.push(county_option)
}
})
})
}
}
3、直接在html代码中调用Cascader 级联选择器即可
<el-cascader
size="large"
:options="areaOptions"
v-model="address"
@change="handleChange"
style="margin-bottom: 20px;">
</el-cascader>
备注：如果不想每次调用都执行上面的处理函数，可以将this.areaOptions写入js文件，每次打开页面时直接调用，若Vant省市级联数据更新时，重新执行一次即可。
网友评论