vue 地址三级联动组件

先引入组件

import VDistpicker from 'v-distpicker'

再注册组件

 

然后在页面直接引用

<v-distpicker style="float: left" :province="form.nowAdPriv" :city="form.nowAdCity" :area="form.nowAdArea" @province="onChangeProvince2" @city="onChangeCity2" @area="onChangeArea2" >
        </v-distpicker>

 

写对应的方法

//现居城市省市区三联动
      onChangeProvince2(data){
        this.form.nowAdPrivCode=data.code;
        this.form.nowAdPriv=data.value;
      },
      onChangeCity2(data){
        this.form.nowAdCityCode=data.code;
        this.form.nowAdCity=data.value;
      },
      onChangeArea2(data){
        this.form.nowAdAreaCode=data.code;
        this.form.nowAdArea=data.value;
      },

 

 

回显的时候直接给赋值  赋值省市区即可