省市区三级联动选择，通常与Popup 弹出层组件配合使用

使用前首先要引入组件 (一般是在vue实例中全局挂载)

  import { Area } from 'vant';
  import { Popup } from 'vant';
 

组件代码

<van-popup v-model="isPopup" position="bottom" round @click-overlay="closePopup()">
            <van-area
                title="标题"
                :area-list="areaList" // 省市区数据，格式见下方
                value=""	// 可以默认设置 弹出时，默认选中的省市区
                :columns-placeholder="['请选择', '请选择', '请选择']"  // 列占位提示文字
                @confirm="confirmBtn"	// 当点击右上方完成时 (这里不用写()和实参，我就是碰了这个坑，导致或取不到选中的信息)
            />
        </van-popup>

省市区数据格式：

{
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '县',
    120100: '天津市',
    120200: '县'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区'
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
    // ....
  }
}

完整数据 Area.json
然后复制 Area.json 中的数据 在自己的项目中创建一个 area.js 文件 在需要使用省市区联动的 vue 组件中引入

import areaList from "../../pluginunit/area.js";

获取选中的省市区信息

confirmBtn(res,index){
            console.log(res);       // 打印选中的省市区数组对象
            console.log(index);     // 索引
            this.fromData.address = `${res[0].name}/${res[1].name}/${res[2].name}`;
            this.isPopup = false;	// 关闭遮罩
        },