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;
       }
     },