vue实现省市县三级联动，超简单

vue实现省市县三级联动，超简单

最近在朋友的项目中碰到用vue实现省市县三级联动的需求，按照我以往的套路来说，基本都是找ui框架里的联级选择器一把梭哈，但是朋友说需要自己实现。好吧，既然朋友都说了要自己实现，那就安排吧！！

一、vue实现省市县三级联动(不用插件版)

必备条件：
1.全国省市县数据(json格式)
2.vue基础

实现步骤：

html部分

<div id="app">
    <select  v-model="sheng" >
        <option disabled value="">请选择省份</option>
        <option  v-for="shengs of base_citys" :key="shengs.code" :value="shengs.name" :label="shengs.name"></option>
    </select>
    <select  v-model="shi" v-if="this.shi_citys.length > 1">
        <option disabled value="">请选择市</option>
        <option v-for="shi of shi_citys" :key="shi.code" :value="shi.name" :label="shi.name"></option>
    </select>
    <select  v-model="xian_qu" >
        <option disabled value="">请选择县/区</option>
        <option v-for="qu of qu_citys" :key="qu.code" :value="qu.name" :label="qu.name"></option>
    </select>
    <div>
        <label>你当前选择的地址:</label>{{fullAddress}}
    </div>
</div>

js部分

var vm = new Vue({
            el:"#app",
            data:{
                sheng:"",
                shi:"",
                xian_qu:"",
                base_citys:[],
                shi_citys:[],
                qu_citys:[]
            },
            mounted(){
                this.handleGetCitys()
            },
            watch:{
                sheng:function(){
                    this.handleSheng()
                    this.handleShi()
                },
                shi:function(){
                    this.handleShi()
                }
            },
            computed:{
                fullAddress:function(){
                    if(this.sheng === this.shi){
                        return this.sheng + "-" + this.xian_qu;
                    }else{
                        return this.sheng + "-" + this.shi + "-" + this.xian_qu
                    }
                }
            },
            methods:{
                async handleGetCitys(){
                    const {data,status} = await axios.get('./citys.json');
                    if(status !== 200) return;
                    this.base_citys = data;
                },
                handleSheng(){
                    this.shi_citys = [];
                    this.qu_citys = [];
                    if(this.base_citys.length >0){
                        this.base_citys.forEach(item => {
                            if(this.sheng === item.name){
                                this.shi_citys = Object.assign([],item.cityList);
                                this.shi = this.shi_citys[0].name;
                            }
                        });
                    }
                },
                handleShi(){
                    if(this.shi_citys.length > 0){
                        this.shi_citys.forEach(item => {
                            if(this.shi === item.name){
                                this.qu_citys = Object.assign([],item.areaList)
                                this.xian_qu = this.qu_citys[0].name;
                            }
                        })
                    } 
                }
            }
        })

最终结果

二、vue实现省市县三级联动(插件版)

前提条件

安装v-distpicker
创建工程化的vue项目

实现步骤

1.假设项目搭建好了，安装v-distpicker

npm install v-distpicker --save

2.项目中引入v-distpicker
2.1全局引入

#在main.js中引入
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)

2.2指定文件中引入

import VDistpicker from 'v-distpicker'
export default {
  components: { VDistpicker }
}

3.template部分的代码

<div class="wrap">
   <v-distpicker @selected="onSelected"></v-distpicker>
   <div>
        你当前选的的地址:{{fullAddress}}
   </div> 
</div>

4.js部分的代码

import VDistpicker from 'v-distpicker'
export default {
    data(){
        return{
            selected:{
                province: "",
                city: "",
                area: ""
            }
        }
    },
    computed:{
        fullAddress:function(){
            return this.selected.province +"-"+ this.selected.city +"-"+ this.selected.area
        }
    },
    methods:{
        onSelected(data){
            const {province,city,area} = data;
            if(!province.code && !city.code && !city.code) return;
            this.selected.province = province.value;
            this.selected.city = city.value;
            this.selected.area = area.value;
        }
    },
    components:{
        VDistpicker
    }
}

5.运行结果

三、结尾

将文章中的代码复制到对应的位置即可运行实现结果

整个实现过程比较简单，写的过程中并没有写注释，若有不懂的可以评论交流