vue+element省市县的二级联动功能

项目中有选择省市县的需求,先选择省,再选择县

解决这个需求也不是很难,总体思路就是看后端接口,

一般后端接口都是请求参数为 0 返回省的数据,不为 0 的话返回相对应的市的数据

template代码:

 <el-form-item label="所属地区: ">

           <el-select

             v-model="form.province"

             @change="getRegion(form.province)"

             placeholder="请选择省份"

             style="width: 165px;"

           >

             <el-option

               :label="item1.region_name"

               :value="item1.region_id"

               v-for="(item1,i) in provinceList"

               :key="i"

             ></el-option>

           </el-select>

           <el-select

             v-model="form.city"

             placeholder="请选择城市"

             style="width: 165px;margin-left:10px;"

           >

             <el-option

               v-for="(item2,i) in cityList"

               :key="i"

               :label="item2.region_name"

               :value="item2.region_id"

             ></el-option>

           </el-select>

         </el-form-item>

script代码：

data数据声明：

  data() {

     return {

       form: {

         province: "",

         city: "",

       },

       // 省市县的信息

       provinceList: [], //获取的一级数组数据

       cityList: [] //获取的二级数组数据

     };

   },

通过判断  region_id 来发请求获取数据

methods代码:

 async getRegion(id) {

       let _this = this;

       let data = {

         region_id: id

       };

       this.form.city = "";

       if (id == 0) {

         const res = await this.$axios.post("/region/list", { ...data });

         _this.provinceList = res.data;

       } else {

         const res = await this.$axios.post("/region/list", { ...data });

         _this.cityList = res.data;

       }

     },