解决elementui 的省市区级联选择器数据不回显问题

     上周写了一个省市区三级联动的地址选择组件，今天测试发现了一个大问题，那就是我可以正常提交地址是没错，可是当我后端返回了数据，我要点击编辑的时候，它并不会自动就给我绑定上去。

vue实现省市区三级联动地址选择组件http://t.csdn.cn/lzuLM- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - - -  - - - - - - - - - - - -

    问题：地址选择器数据不回显。

    解决：用一个props，每从外面接收一个address(province,city,area)，让它三个子项对应好三级，一个个绑上去就好啦！~

最终的写法：

一、 封装vue组件

  

   

    

     

    
    

     

      <!-- 地址选择 & 省市区三级联动 -->
     
    
   

    

     

    
    

     

      <template>
     
    
   

    

     

    
    

     

      <el-form ref="form" :model="form" label-width="120px">
     
    
   

    

     

    
    

     
    
      <el-row>
     
    
   

    

     

    
    

     
      
      <el-select
     
    
   

    

     

    
    

     
        
      v-model=
      "form.province"
     
    
   

    

     

    
    

     
        
      placeholder=
      "请选择省"
     
    
   

    

     

    
    

     

              @
      change=
      "changePro"
     
    
   

    

     

    
    

     

            >
     
    
   

    

     

    
    

     
        
      <el-option
     
    
   

    

     

    
    

     
          
      v-for=
      "item in addressData"
     
    
   

    

     

    
    

     
          
      :key=
      "item.code"
     
    
   

    

     

    
    

     
          
      :label=
      "item.name"
     
    
   

    

     

    
    

     
          
      :value=
      "item.name"
     
    
   

    

     

    
    

     

              >
     
    
   

    

     

    
    

     
        
      </el-option>
     
    
   

    

     

    
    

     
      
      </el-select>
     
    
   

    

     

    
    

     
      
      <el-select
     
    
   

    

     

    
    

     
        
      v-model=
      "form.city"
     
    
   

    

     

    
    

     
        
      placeholder=
      "请选择市"
     
    
   

    

     

    
    

     

              @
      change=
      "changeCity"
     
    
   

    

     

    
    

     

            >
     
    
   

    

     

    
    

     
        
      <el-option
     
    
   

    

     

    
    

     
          
      v-for=
      "item in cityData"
     
    
   

    

     

    
    

     
          
      :key=
      "item.code"
     
    
   

    

     

    
    

     
          
      :label=
      "item.name"
     
    
   

    

     

    
    

     
          
      :value=
      "item.name"
     
    
   

    

     

    
    

     

              >
     
    
   

    

     

    
    

     
        
      </el-option>
     
    
   

    

     

    
    

     
      
      </el-select>
     
    
   

    

     

    
    

     
      
      <el-select
     
    
   

    

     

    
    

     
        
      v-model=
      "form.district"
     
    
   

    

     

    
    

     
        
      placeholder=
      "请选择区"
     
    
   

    

     

    
    

     

              @
      change=
      "changeArea"
     
    
   

    

     

    
    

     

            >
     
    
   

    

     

    
    

     
        
      <el-option
     
    
   

    

     

    
    

     
          
      v-for=
      "item in areaData"
     
    
   

    

     

    
    

     
          
      :key=
      "item.code"
     
    
   

    

     

    
    

     
          
      :label=
      "item.name"
     
    
   

    

     

    
    

     
          
      :value=
      "item.name"
     
    
   

    

     

    
    

     

              >
     
    
   

    

     

    
    

     
        
      </el-option>
     
    
   

    

     

    
    

     
      
      </el-select>
     
    
   

    

     

    
    

     
      
      <el-input placeholder="详细地址" v-model="form.detail">
      </el-input>
     
    
   

    

     

    
    

     
    
      </el-row>
     
    
   

    

     

    
    

     
    
      <!-- <h3>测试当前选中地址：{{result}}</h3> -->
     
    
   

    

     

    
    

     

      </el-form>
     
    
   

    

     

    
    

     

      </template>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      import address 
      from 
      "@/utils/address/address.json"; 
      //全国省市区街道数据
     
    
   

    

     

    
    

     

      export 
      default {
     
    
   

    

     

    
    

     
  
      data(
      ) {
     
    
   

    

     

    
    

     
    
      return {
     
    
   

    

     

    
    

     
      
      // 省数据
     
    
   

    

     

    
    

     
      
      addressData: [],
     
    
   

    

     

    
    

     
      
      // 市数据
     
    
   

    

     

    
    

     
      
      cityData: [],
     
    
   

    

     

    
    

     
      
      // 区数据
     
    
   

    

     

    
    

     
      
      areaData: [],
     
    
   

    

     

    
    

     

          };
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  
      props:{
     
    
   

    

     

    
    

     
    
      // 街道数据
     
    
   

    

     

    
    

     
    
      form:{
     
    
   

    

     

    
    

     
      
      province: 
      "",
     
    
   

    

     

    
    

     
      
      // 市
     
    
   

    

     

    
    

     
      
      city: 
      "",
     
    
   

    

     

    
    

     
      
      // 区
     
    
   

    

     

    
    

     
      
      district: 
      "",
     
    
   

    

     

    
    

     
      
      //详细地址
     
    
   

    

     

    
    

     
      
      detail:
      ""
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  
      created(
      ) {
     
    
   

    

     

    
    

     
    
      // 省份数据初始化
     
    
   

    

     

    
    

     
    
      this.
      addressData = address;
     
    
   

    

     

    
    

     
    
      console.
      log(
      "this.form",
      this.
      form)
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  
      computed:{
     
    
   

    

     

    
    

     
    
      //选择结果
     
    
   

    

     

    
    

     
    
      result(
      ){
     
    
   

    

     

    
    

     
      
      if(!
      this.
      form.
      district){
     
    
   

    

     

    
    

     
        
      let val=
      ''
     
    
   

    

     

    
    

     
        
      return 
      ''
     
    
   

    

     

    
    

     

            }
      else 
      if(
      this.
      form.
      district && 
      this.
      form.
      detail){
     
    
   

    

     

    
    

     
        
      let val=
      ''+
      this.
      form.
      province+
      ","+
      this.
      form.
      city+
      ","+
      this.
      form.
      district+
      ","+
      this.
      form.
      detail
     
    
   

    

     

    
    

     
        
      return 
      ''+
      this.
      form.
      province+
      ","+
      this.
      form.
      city+
      ","+
      this.
      form.
      district+
      ","+
      this.
      form.
      detail
     
    
   

    

     

    
    

     

            }
      else{
     
    
   

    

     

    
    

     
        
      let val=
      ''+
      this.
      form.
      province+
      ","+
      this.
      form.
      city+
      ","+
      this.
      form.
      district
     
    
   

    

     

    
    

     
        
      return 
      ''+
      this.
      form.
      province+
      ","+
      this.
      form.
      city+
      ","+
      this.
      form.
      district
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
  
      methods: {
     
    
   

    

     

    
    

     
    
      reset(
      ){
     
    
   

    

     

    
    

     
        
      this.
      form= {
     
    
   

    

     

    
    

     
            
      // 省
     
    
   

    

     

    
    

     
            
      province: 
      "",
     
    
   

    

     

    
    

     
            
      // 市
     
    
   

    

     

    
    

     
            
      city: 
      "",
     
    
   

    

     

    
    

     
            
      // 区
     
    
   

    

     

    
    

     
            
      district: 
      "",
     
    
   

    

     

    
    

     
            
      //详细地址
     
    
   

    

     

    
    

     
            
      detail:
      "",
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    
      // 省份更改
     
    
   

    

     

    
    

     
    
      changePro(
      e) {
     
    
   

    

     

    
    

     
      
      // 从省中过滤出市的数据
     
    
   

    

     

    
    

     
      
      this.
      cityData = 
      this.
      addressData.
      filter(
      (item) => {
     
    
   

    

     

    
    

     
        
      return item.
      name == e;
     
    
   

    

     

    
    

     

            })[
      0].
      children;
     
    
   

    

     

    
    

     
      
      // 省发生改变的时候 清空输入框市区街道的内容
     
    
   

    

     

    
    

     
      
      this.
      form.
      district = 
      "";
     
    
   

    

     

    
    

     
      
      this.
      form.
      city = 
      "";
     
    
   

    

     

    
    

     
      
      // 省发生更改时 该表空区街道数据的内容
     
    
   

    

     

    
    

     
      
      this.
      areaData = [];
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    
      // 市更改
     
    
   

    

     

    
    

     
    
      changeCity(
      e) {
     
    
   

    

     

    
    

     
      
      // 获取到区的数据
     
    
   

    

     

    
    

     
      
      this.
      areaData = 
      this.
      cityData.
      filter(
     
    
   

    

     

    
    

     
        
      (item) => item.
      name == e
     
    
   

    

     

    
    

     

            )[
      0].
      children;
     
    
   

    

     

    
    

     
      
      // 清空数据后面对应数组的数据
     
    
   

    

     

    
    

     
      
      this.
      form.
      district = 
      "";
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    
      // 区更改
     
    
   

    

     

    
    

     
    
      changeArea(
      e) {
     
    
   

    

     

    
    

     
      
      let temp = 
      this.
      areaData.
      filter(
      (item) => item.
      name == e);
     
    
   

    

     

    
    

     
      
      // 获取到区的code码
     
    
   

    

     

    
    

     
      
      this.
      form.
      regionalNumber = temp[
      0].
      code;
     
    
   

    

     

    
    

     
      
      // 获取到街道的数据
     
    
   

    

     

    
    

     
      
      this.
      jdData = 
      this.
      areaData.
      filter(
      (item) => item.
      name == e)[
      0].
      children;
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     

      };
     
    
   

    

     

    
    

     

      </script>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <style lang="scss" rel="stylesheet/scss" scoped>
     
    
   

    

     

    
    

     

      .el-row{
     
    
   

    

     

    
    

     
    
      display: inline;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      .el-row{
     
    
   

    

     

    
    

     
    
      display: inline-flex;
     
    
   

    

     

    
    

     
    
      flex: auto;
     
    
   

    

     

    
    

     
    
      .el-select {
     
    
   

    

     

    
    

     
        
      margin: 
      0 
      20px 
      0 
      0;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </style>
     
    
  
 

  
 

二、在页面中引用 

  

   

    

     

    
    

     
      
      <el-row>
     
    
   

    

     

    
    

     
        
      <el-col>
     
    
   

    

     

    
    

     
          
      <el-form-item label="联系地址" prop="address" v-model="ruleForm.address">
     
    
   

    

     

    
    

     
            
      <checkAddress v-model="ruleForm.address" :form="ruleForm.address" ref="address"/>
     
    
   

    

     

    
    

     
          
      </el-form-item>
     
    
   

    

     

    
    

     
        
      </el-col>
     
    
   

    

     

    
    

     
      
      </el-row>
     
    
  

  

   

    

     

    
    

     
      
      <el-table-column prop="address" label="联系地址">
     
    
   

    

     

    
    

     
          
      <template slot-scope="scope">
     
    
   

    

     

    
    

     
            
      <span v-for="(item,index) in scope.row.address" :key="index" :label="item">
     
    
   

    

     

    
    

     
              
      <span>
     
    
   

    

     

    
    

     

                      {{item}}
     
    
   

    

     

    
    

     
              
      </span>
     
    
   

    

     

    
    

     
            
      </span>
     
    
   

    

     

    
    

     
          
      </template>
     
    
   

    

     

    
    

     
      
      </el-table-column>
     
    
  

  

   

    

     

    
    

     
  
      address: {
     
    
   

    

     

    
    

     
                  
      // 省
     
    
   

    

     

    
    

     
                  
      province: 
      "",
     
    
   

    

     

    
    

     
                  
      // 市
     
    
   

    

     

    
    

     
                  
      city: 
      "",
     
    
   

    

     

    
    

     
                  
      // 区
     
    
   

    

     

    
    

     
                  
      district: 
      "",
     
    
   

    

     

    
    

     
                  
      //详细地址
     
    
   

    

     

    
    

     
                  
      detail:
      ""
     
    
   

    

     

    
    

     

                      },
      //联系地址
     
    
  

  

   

    

     

    
    

     
    
      watch:{
     
    
   

    

     

    
    

     
      
      ruleForm:{
     
    
   

    

     

    
    

     
        
      // deep:true,
     
    
   

    

     

    
    

     
        
      handler(
      ){
     
    
   

    

     

    
    

     
          
      this.
      ruleForm.
      address=
      this.
      $refs.
      address.
      form
     
    
   

    

     

    
    

     
          
      console.
      log(
      this.
      ruleForm.
      address)
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            }
     
    
  

  

   

    

     

    
    

     

      created(
      ){
     
    
   

    

     

    
    

     
        
      if(
      this.
      rowData.
      contactType==
      "ADDRESS"){
     
    
   

    

     

    
    

     
          
      this.
      ruleForm.
      address.
      province=
      this.
      rowData.
      address.
      province
     
    
   

    

     

    
    

     
          
      this.
      ruleForm.
      address.
      city=
      this.
      rowData.
      address.
      city
     
    
   

    

     

    
    

     
          
      this.
      ruleForm.
      address.
      district=
      this.
      rowData.
      address.
      district
     
    
   

    

     

    
    

     
          
      this.
      ruleForm.
      address.
      detail=
      this.
      rowData.
      address.
      detail
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

      }
     
    
  

 三、去网上找个Address.json文件放进去就好了

就这样愉快地解决问题啦！从此点击编辑，相对应的地址数据会回显。

四、如果是多个填写项，需要时让他们一一对应

那么使用代码也需要进行改进

  

   

    

     

    
    

     
            
      <el-row>
     
    
   

    

     

    
    

     
              
      <el-col>
     
    
   

    

     

    
    

     
                
      <el-form-item label="联系地址" prop="address" v-model="item.address">
     
    
   

    

     

    
    

     
                  
      <!-- <el-input v-model="item.contactTypeFlex3"></el-input> -->
     
    
   

    

     

    
    

     
                  
      <checkAddress ref="address" v-model="item.address" :key="index" :form="item.address"/>
     
    
   

    

     

    
    

     
                
      </el-form-item>
     
    
   

    

     

    
    

     
              
      </el-col>
     
    
   

    

     

    
    

     
            
      </el-row>
     
    
  

  

   

    

     

    
    

     
                
      address: {
     
    
   

    

     

    
    

     
                  
      // 省
     
    
   

    

     

    
    

     
                  
      province: 
      "",
     
    
   

    

     

    
    

     
                  
      // 市
     
    
   

    

     

    
    

     
                  
      city: 
      "",
     
    
   

    

     

    
    

     
                  
      // 区
     
    
   

    

     

    
    

     
                  
      district: 
      "",
     
    
   

    

     

    
    

     
                  
      //详细地址
     
    
   

    

     

    
    

     
                  
      detail:
      ""
     
    
   

    

     

    
    

     

                      },
      //联系地址
     
    
  

  

   

    

     

    
    

     
            
      if(item.
      contactType==
      "ADDRESS"){
     
    
   

    

     

    
    

     

                    current.
      address.
      province=item.
      contactTypeFlex1
     
    
   

    

     

    
    

     

                    current.
      address.
      city=item.
      contactTypeFlex2
     
    
   

    

     

    
    

     

                    current.
      address.
      district=item.
      contactTypeFlex3
     
    
   

    

     

    
    

     

                    current.
      address.
      detail=item.
      contactTypeFlex34
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     
            
      this.
      tempList.
      push(current)