vue 用省市区三级联动之傻瓜式教程（复制粘贴即用）
npm 下载
npm install v-distpicker --save
main.js
//引入 省市区三级联动
import Distpicker from 'v-distpicker'
//全局使用省市区三级联动
Vue.component('v-distpicker', Distpicker)
vue 代码
<template>
<div>
<div class="administrative">
行政区：
<v-distpicker style="margin-top:-24px;margin-left:80px;" province="areaData[0].province" city="areaData[1].city" area="areaData[2].area" @selected="onSelected"> </v-distpicker>
</div>
</div>
</template>
<script>
// import AreaJson from "../../address.js"
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
name:'near',
data(){
return{
//省市区三级联动
areaData : [
{
value : 0,
province : '',
},
{
value : 1,
city : '',
},
{
value : 2,
county : '',
}
],
}
},
methods:{
// 获取到省市区三级联动的值
onSelected(data) {
//可以获取到省的id值
this.areaData[0].province = data.province.value
//可以获取到市的id值
this.areaData[1].city = data.city.value
//可以获取到县的ID值
this.areaData[2].county = data.area.value
//可以获取到省地方的值
this.areaData[0].province = data.province.code
//可以获取到市地方的值
this.areaData[1].city = data.city.code
//可以获取到县地方的值
this.areaData[2].county = data.area.code
},
},
}
</script>
<style>
.administrative{
margin-left: 20px;
}
</style>