全国省市县三级下拉框实现

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>