其他分享
首页 > 其他分享> > Vue实现省市区三级选择

Vue实现省市区三级选择

作者:互联网

一、安装v-distpicker:

npm i v-distpicker --s

二、使用v-distpicker:

1、首先在script中导入:

import vDistpicker from 'v-distpicker';

2、使用组件:

①在<template>中:

<div>
      <v-distpicker class="picker"  @selected='selected'></v-distpicker>
</div>

②在<script>中:

components:{
    vDistpicker
},

③获取选择到的省市区:

data () {
    return {
      area:'',//省市区三级
    }
},
methods: {
    selected(data){
      this.area= data.province.value + data.city.value + data.area.value;
    }
}

④在页面中输出:

<div v-if="area!=''">{{area}}</div>

标签:Vue,area,distpicker,value,vDistpicker,省市区,data,三级
来源: https://blog.csdn.net/qq_44660042/article/details/120317287