Element实现和Vant的省市级联数据统一，避免出现数据不对

由于在工作中使用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省市级联数据更新时，重新执行一次即可。