iview省市区三级联动（无后台数据情况下）

 

    {{ item.label }}
-


    {{ item.label }}
-


    {{ item.label }}

1、先引入

import city from"../../../../static/city.json"

 2、然后在data里添加  city:city

 3、省（1）写法，打包没问题

mounted(){
       
          var ptypeid =  localStorage.getItem('ptypeid')
          this.uid = localStorage.getItem('uid')
          this.ptypeid = ptypeid;
        //   console.log(ptypeid)
   
          //省市区
        //   var that = this;
        //   axios({
        //     method:'get',
        //     url:"./city.json"
        //     }).then(function(data){
        //          console.log(data.data)       
                var city = this.city 
                for(var i in city){
                    var obj = {
                        value:city[i].id,
                        label:city[i].name
                    }
                   this.cityList1.push(obj)              
                   this.shi.push(city[i].child);
                   
                }
                // console.log(that.shi)
            // })
           document.title="员工管理" 
                
       },
      

省（2），打包后有问题

 mounted(){
          
          //省
          var that = this;
          axios({
            method:'get',
            url:"../../static/city.json"
            }).then(function(data){
                 //console.log(data.data)       
                var city = that.city = data.data;
                for(var i in city){
                    var obj = {
                        value:city[i].id,
                        label:city[i].name
                    }
                   that.cityList1.push(obj)              
                   that.shi.push(city[i].child);
                   
                }
                // console.log(that.shi)
            })
                
       },

 data数据

         cityList1:[],
         cityList2:[],       
         cityList3:[],  
         model1:"",   
         model2:"",
         model3:"",  
         model1: '',
         sheng:[],
         shi:[],
         qu:[],
         city:city,

市和区/县

//点击省得到id找出对应的市

change1(val){
            // console.log(val,this.city) 
            this.cityList2=[]
            this.model2 = "",//清空
            this.model3 = ""//清空
            this.sheng = val //为得到县储存值
                              
            var city = this.city;  
             for(var i in city){
                if(val == city[i].id){                 
                   console.log(city[i].child) ;
                   var shi = city[i].child
                   for(var j in shi){
                       var obj = {
                           value:shi[j].id,
                           label:shi[j].name
                       }
                       
                        this.cityList2.push(obj)
                   }
                   
                }
              }

        },
//改变市获取区县
        change2(val2){
            this.cityList3=[]
            this.model3 = ""//清空          
            var val = this.sheng;
             console.log(val,val2)                   
            var city = this.city;  
             for(var i in city){
                            
                   var shi = city[i].child
                   for(var j in shi){
                        if(val2==shi[j].id){  
                            var qu = shi[j].child;
                            console.log(qu)               
                          
                          
                            for(var k in qu){
                                 var obj = {
                                    value:qu[k].id,
                                    label:qu[k].name
                                 }    
                                 this.cityList3.push(obj)
                            }
                            console.log(obj)
                        }
                       
                   }
                   
              }
        },
        change3(val){
            console.log(val)
            this.model3 = val
        },

 反过来，通过省市区的id，找到对应的名称

                     //通过id找出对应的省市区名称
                     var city = that.city;  //省市区数据
                        for(var j in city){
                            if(obj.asheng == city[j].id){   

                            //  console.log(city[j].name)
                              obj.asheng=city[j].name
                             var shi = city[j].child
                             for(var k in shi){
                                //   console.log(obj.ashi)
                               if(obj.ashi== shi[k].id){
                                //    console.log(shi[k].name)
                                   obj.ashi = shi[k].name
                               }
                              var qu = shi[k].child
                                 for(var n in qu){
                                    if(obj.aqu== qu[n].id){
                                        // console.log(qu[n].name)
                                        obj.aqu = qu[n].name
                                    }
                                 }   
                             }
                            
                            }
                        }

                      obj.area = obj.asheng+"-"+obj.ashi+"-"+obj.aqu
                       
                                      
                     
                
                 
              

json数据：https://blog.csdn.net/QQ_Empire/article/details/84837101