Vue------实现省市区三级联动

本篇将用，vue框架实现省市区三级联动

一、思路

三个下拉框，分别代表省、市、区

下面的任务就是，分别绑定 省、市、区三个下拉框：

点击省会出现所有的省份

点击对应的省份，市下拉框会对应出现对应的市

点击市会出现所有的市

点击对应的市，区下拉框会对应出现对应的区。

依次可以实现 省市区三级联动。

二、vue主体实现

如下面代码所示

    

        省
        
            {{p.name}}
        

        市
        
            
                {{item.name}}
            
        


        区
        
            
                {{item.name}}
            
        


    

三、完善代码（联动）

要想实现省市区三级联动

对 省、市进行监控，对应的数据改变，就改变对应的省市县，以此来完成省市县三级联动

完善后的 Vue 如下

   new Vue({
        el: "#app",
        data: {
            pro: "110000",
            city: "",
            county: "",
            list: citys
        },
        methods: {
            loadCity(proCode) {
                let $citys = this.list.find(s => s.adcode == proCode).districts[0];
                if ($citys != null) {
                    this.city = $citys.adcode;
                }
            },
            loadCounty(proCode, cityCode) {
                let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0];
                if ($county != null) {
                    this.county = $county.adcode;
                }
            }
        },
        created() {
            this.loadCity(this.pro);
            this.loadCounty(this.pro, this.city);
        },
        watch: {
            pro: function (newVal, oldVal) {
                this.loadCity(newVal);
            },
            city: function (newVal, oldVal) {
                this.loadCounty(this.pro, this.city);
            }
        },
    })

四、全部代码

html部分

    
    
    
    
    
    







    

        省
        
            {{p.name}}
        

        市
        
            
                {{item.name}}
            
        


        区
        
            
                {{item.name}}
            
        


    

 js部分 ( 私聊作者获取 )

---