laravel +vue +element組件實現城市的三級聯動

1. 一般情況，提到聯動，大家可能首先想到就是用遞歸去處理，在這里把處理邏輯大部分放到前端來做，后端我們只需要通過判斷ID來獲取數據並返回給前台，
2.  這里用到啦三元運算，大家不熟悉的可以自行查閱下三元運算的用法，這里不多做贅述，
3. 代碼如下：

4. /*
      * 展示三級聯動城市列表
      * */
   
       public function city(Request $request)
       {
             
           $parent_id = $request->get('parent_id') ? $request->get('parent_id') : 1;
           $data = City::where('PARENT_ID', $parent_id)->get();
           return $data;
   
       }
   
   

    

5. 前台vue代碼：
6. 這里大家需要注意VUE  中 created()的用法，和mounted()雖然都是自動加載的方法，有什么區別，大家自行搜索
7.  
   

8. 1 <template>  
    2 <div class="div">
       <div class="top">
         <el-page-header @back="goBack" content="修改地區"></el-page-header>
       </div>
       <div class="tianchun"></div>
       <div class="fill"></div>
       <div class="select">
         <el-form ref="form" label-width="80px">
           <el-form-item label="省:">
             <el-select v-model="sheng" placeholder="請選擇省份" @change="loadShi">
               <el-option  13                     v-for="item in province"
    :key="item.REGION_CODE"
    :label="item.REGION_NAME"
    :value="item.REGION_ID"
               ></el-option>
             </el-select>
           </el-form-item>
   
           <el-form-item label="市:">
             <el-select v-model="shi" placeholder="請選擇市區" @change="loadQu">
               <el-option  24                     v-for="item in cities"
    :key="item.REGION_CODE"
    :label="item.REGION_NAME"
    :value="item.REGION_ID"
               ></el-option>
             </el-select>
           </el-form-item>
   
           <el-form-item label="縣:">
             <el-select v-model="qu" placeholder="請選擇區縣">
               <el-option  35                     v-for="item in district"
    :key="item.REGION_CODE"
    :label="item.REGION_NAME"
    :value="item.REGION_ID"
               ></el-option>
             </el-select>
           </el-form-item>
         </el-form>
       </div>
       <div class="button">
         <el-button type="warning" style="background-color: #3D7EFF;border-color: #3D7EFF;" @click="gomodify"> &nbsp;&nbsp;&nbsp;&nbsp;保&nbsp;&nbsp;
           &nbsp;&nbsp;存&nbsp;&nbsp;&nbsp;&nbsp;
         </el-button>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <el-button type="success" style="background-color: #3D7EFF;border-color: #3D7EFF;" @click="goBack"> &nbsp;&nbsp;&nbsp;&nbsp;取&nbsp;&nbsp;
           &nbsp;&nbsp;消&nbsp;&nbsp;&nbsp;&nbsp;
         </el-button>
       </div>
     </div>
   </template>
   
   <style scoped>
    .div {
    background-color: #f2f2f2;
    width: 100%;
    height: auto;
     }
   
    .tianchun {
    width: 100%;
    height: 6px;
     }
   
    .top {
    width: 100%;
    height: 45px;
    padding-left: 10px;
    padding-top: 20px;
    background-color: #ffffff;
     }
   
    .fill {
    width: 100%;
    height: 5px;
    background-color: #ffffff;
    padding-top: 15px;
     }
   
    .select {
    background-color: #ffffff;
     }
   
    .button {
    float: right;
    margin-top: 30px;
    margin-right: 40px;
     }
   </style>
   
   <script>
    export default {  96  data() {  97       return {  98  province: [],  99  cities: [], 100  district: [], 101  options: [], 102  sheng: "", 103  shi: "", 104  qu: "", 105  value: ""
    } 107  },
    108  created() { 109       var that = this; 110       this.$axios.get("/getaddresslist").then(function (response) { 111  that.province = response.data; 112  }); 113       this.loadRegion(1, "sheng"); 114  }, 115  methods: { 116  loadRegion(parent_id, flag) { 117         var that = this; 118  that.$axios 119  .get("/getaddresslist", {params: {parent_id: parent_id}}) 120  .then(function (response) { 121                   if ("sheng" == flag) { 122  that.province = response.data; 123  } 124                   if ("shi" == flag) { 125  that.cities = response.data; 126  } 127                   if ("qu" == flag) { 128  that.district = response.data; 129  } 130  }); 131  }, 132  loadShi(e) { 133         this.loadRegion(e, "shi"); 134  }, 135  loadQu(e) { 136         this.loadRegion(e, "qu"); 137  }, 138   } 146  }; 147 </script>