您现在的位置：首页 >> 前端 >> 内容

vue中国省市区地址三级联动插件V-Distpicker实例讲解

时间：2018/6/29 16:01:58 点击：

　　核心提示：安装和实例可直接参考官网templateVDistpicker:province=getListData.province:city=getListData.city:area=getListData...

安装和实例可直接参考官网

template

<VDistpicker
    :province="getListData.province"
    :city="getListData.city"
    :area="getListData.district"
    @province="onChangeProvince" //选择省份
    @city="onChangeCity" //选择城市
    @area="onChangeArea" //选择地区 >
</VDistpicker>

script

import VDistpicker from 'v-distpicker'
export default {
    data() {
        getListData: {
            province: '',
            city: '',
            district: ''  //这个参数名后端返回的和插件定义的不一样
          },    
    },
    methods: {
        onChangeProvince(data) {
          this.getListData.province = data.value;
        },
        onChangeCity(data) {
          this.getListData.city = data.value;
        },
        onChangeArea(data) {
          this.getListData.district = data.value;
        },
    }
}