其他分享
首页 > 其他分享> > vue项目利用vant组件实现省市区三级联动(含省市区js数据)

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