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

 项目中有这样的需求，选择对应的省份城市

实现思路：点击获取到所有省份信息，通过对应的省份id，查询对应的城市信息

1. template代码：

        <el-form-item label="所属地区: ">
           <el-select
             v-model="form.province"
             @change="getRegion(form.province)"
             placeholder="请选择省份"
             style=" 165px;"
           >
             <el-option
               :label="item1.provinceName"
               :value="item1.provinceId"
               v-for="(item1,i) in provinceList"
               :key="i"
             ></el-option>
           </el-select>
           <el-select
             v-model="form.city"
             placeholder="请选择城市"
             style=" 165px;margin-left:10px;"
           >
             <el-option
               v-for="(item2,i) in cityList"
               :key="i"
               :label="item2.cityName"
               :value="item2.cityId"
             ></el-option>
           </el-select>
         </el-form-item>

 2. script 中data参数设置：

data() {
     return {
       form: {
         province: "",
         city: "",
       },
       provinceList: [], //获取省数组数据
       cityList: [] //获取市数组数据
     };
   },

3. methods代码

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

async getRegion(provinceId) {
       var data = {
         provinceId: provinceId
       };
       this.form.city = "";
       if (provinceId== 0) {
         var res = await this.$axios.post("/province/list");
         this.provinceList = res.data;
       } else {
         var res = await this.$axios.post("/city/list", data);
         this.cityList = res.data;
       }
     },

​