笔记18Vue三级联动选择器组件

Vue-实现一个三级联动省市区选择器

思路：第一个选择器的影响改变第二个、第三个； 第二个选择器的改变影响第三个；第三个选择器的显示由其数据决定

html部分

  < div id=’app’>
      < div class=’box’>
          < select @change =’update2();update3()’ v-model = ‘prov’>
              < option v-for=’(v,i) in arr’ :key=’v.id’  < /option>
          < /select>
          < select @change =’update3()’ v-model = ‘city’>
              < option v-for=’(v,i) in cityArr’ :key=’v.id’  < /option>
          < /select>
          < select  v-model = ‘district’ v-show = ‘district’ >
              < option v-for=’(v,i) in districtArr’ :key=’v.id’  < /option>
          < /select>
      < /div>
  < /div>

css部分

.app{
    width:100%}
.box{
    width:100%
    display:flex
    flex-flow:row wrap}
.box>select{
    flex : 0 0 33.3%
    margin-left: 10px}

js部分

    < script type=’text/javascript’ src= ‘../js/vue.js’> < /script>
    < script type=’text/javascript’ >
         new Vue({
            el:’#app’,
            data:{
                arr:[]          //存放总数据数组
                prov:’北京’         //当前选中的省的value
                cityArr:[]      //当前的市数据数组
                city:’’         //当前选中的市的value
                districtArr:[]  //当前的区数据数组
                district:’’     //当前选中的区的value
            }
            method:{
                async getData(){
                 try{
                     let res = await axios.get(‘/api’,{})
                 }
                 catch(err){
                     return Promise.reject(err)
                 }
                 if(res.code!==200){
                     this.$toast({‘xxx’})
                     return
                 }
                 this.arr = res.data //请求成功后，初始化所有数据数组arr
                }

            update2(){  //改变市数据数组
                this.arr.forEach(e=>{
                        if(e.name === this.prov){
                            this.cityArr = e.sub   
                            //遍历arr数组，选取当前选中的省子集数据，赋予给cityArr;
                            //若后端需要分开请求省市区数据，则在这里再次发起http请求
                        }
                    })
                this.city = this.cityArr[1].name  //同步改变第二个选择器的value值
            }
            update3(){  //改变省数据数组 
                this.cityArr.forEach(e=>{
                  if(e.name === this.city){
                     this.districtArr = e.sub
                     }
                  this.distict = this.districtArr.length>0 && this.districtArr ?
                  this.districtArr[1].name : ''   
                  //这里三元表达式判断，若选中的第二个选择器为第一项‘请选择’，则不显示第三项
                })
            }
        },
        mount(){
            this.getData()
        }
     })
< /script>