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

标签：province city 省市 value 省市区 areaData data 下拉框 三级

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>        

标签：province,city,省市,value,省市区,areaData,data,下拉框,三级
From： https://www.cnblogs.com/qibaidao/p/17503475.html