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
                       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
                       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
                       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 {
       data() {
         return {
           province: [],
           cities: [],
           district: [],
           options: [],
           sheng: "",
           shi: "",
           qu: "",
           value: ""
         }
       },
   
       created() {
         var that = this;
         this.$axios.get("/getaddresslist").then(function (response) {
           that.province = response.data;
         });
         this.loadRegion(1, "sheng");
       },
       methods: {
         loadRegion(parent_id, flag) {
           var that = this;
           that.$axios
                   .get("/getaddresslist", {params: {parent_id: parent_id}})
                   .then(function (response) {
                     if ("sheng" == flag) {
                       that.province = response.data;
                     }
                     if ("shi" == flag) {
                       that.cities = response.data;
                     }
                     if ("qu" == flag) {
                       that.district = response.data;
                     }
                   });
         },
         loadShi(e) {
           this.loadRegion(e, "shi");
         },
         loadQu(e) {
           this.loadRegion(e, "qu");
         },
        }
     };
   </script>