vant中实现地址的四级选择（省市县街道）

引入Cascader

注意：vant 2.12 版本开始支持此组件，不然会报错

import Vue from 'vue';
import { Cascader } from 'vant';

Vue.use(Cascader);

 引入全国四级区域地址

 https://download.csdn.net/download/qq_34797972/14123322

实现

引入 import area from "@/utils/4-area";

自定义成vant识别的json

         clone(obj) {
                return JSON.parse(JSON.stringify(obj));
            },            
        getAreaPlus() {
                let areal = this.clone(area) // 地址json拷贝
                console.log(areal);
                this.areaList = areal.map(item => {
                    return {
                        text: item.pro_name,
                        value: item.pro_code,
                        children: item.pro_cities.map(e => {
                            return {
                                text: e.city_name,
                                value: e.city_code,
                                children: e.city_areas.map(val => {
                                    return {
                                        text: val.area_name,
                                        value: val.area_code,
                                        children: val.area_streets.map(t => {
                                            return {
                                                text: t.street_name,
                                                value: t.street_code
                                            }
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
            }

插入使用 

      <van-cascader
                    v-model="areaCode"
                    title="请选择地址"
                    :options="areaList"
                    @close="showArea = false"
                    @finish="onAreaConfirm"
            />

选择完成 

        onAreaConfirm({selectedOptions}) {
                this.areaName = selectedOptions.map((option) => option.text).join('');
                this.areaCode = selectedOptions[selectedOptions.length - 1].value
                this.showArea = false;
            },

效果图