vue项目利用vant组件实现省市区三级联动（含省市区js数据）

一、index页面引入在线js数据

//在index.html中引入省市区的json文件
<script src="https://sucai.suoluomei.cn/sucai_zs/file/20191217145416-area.js"></script>

二、引入vant组件

import Vue from 'vue';
import { Area } from 'vant';
Vue.use(Area);

三、基础用法

//初始化省市区组件时，需要通过 area-list 属性传入省市区数据。
<van-area title="标题" :area-list="areaList" />
//areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。
data() {
    return {
      areaList: are, //are为json文件里的areaList名字，直接这样用就行
	 };
 }

这样渲染出的下拉框就能进行全国省市区选择了~

标签：vue,vant,list,key,组件,省市区,areaList
来源： https://blog.csdn.net/TKP666/article/details/121790294