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.運行結果

三、結尾

將文章中的代碼複製到對應的位置即可運行實現結果

整個實現過程比較簡單，寫的過程中並沒有寫註釋，若有不懂的可以評論交流