省市级联动

 

                    <el-select
                        style="width: 145px"
                        placeholder="请选择省"
                        v-model="checkRegion.provinceId"
                        @change="checkProvince"
                      >
                        <el-option
                          v-for="item in regionList.province"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <el-select
                        style="width: 145px"
                        placeholder="请选择市"
                        v-model="checkRegion.cityId"
                        @change="checkCity"
                      >
                        <el-option
                          v-for="item in regionList.city"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                      <el-select
                        style="width: 145px"
                        placeholder="区域 / 街道"
                        v-model="checkRegion.areaId"
                        @change="checkArea"
                      >
                        <el-option
                          v-for="item in regionList.area"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>

 regionList: {
        //地区列表 数据
        province: null, //省
        city: null, // 市
        area: null, //区
      },
      checkRegion: {}, //选中的 provinceId  cityId  areaId

// 选中省
    checkProvince() {
      // 先判断有没有选过省
      if (
        this.regionList.province == null &&
        this.checkRegion.provinceId == null
      )
        return;
      // 拿到上一级id请求下一级列表
      let pid = this.checkRegion.provinceId;
      // 每次选择省的时候判断  有没有选过市和区  如果选择过要清空重新选
      if (this.checkRegion.areaId) delete this.checkRegion.areaId;
      if (this.checkRegion.cityId) delete this.checkRegion.cityId;

      this.$axios({
        method: "post",
        url: `/api/region/index`,
        data: { pid },
      }).then((res) => {
        this.regionList.city = res.data.data;
        // console.log(this.regionList)
      });
    },
    // 选中市
    checkCity() {
      // 先判断有没有选过市
      if (this.regionList.city == null && this.checkRegion.cityId == null)
        return;
      // 拿到上一级id请求下一级列表
      let pid = this.checkRegion.cityId;
      // 每次选择市的时候判断  有没有选过区  如果选择过要清空重新选
      if (this.checkRegion.areaId) delete this.checkRegion.areaId;

      this.$axios({
        method: "post",
        url: `/api/region/index`,
        data: { pid },
      }).then((res) => {
        this.regionList.area = res.data.data;
        // console.log(this.regionList)
      });
    },
    // 选中区
    checkArea() {
      console.log(this.regionList);
      console.log(this.checkRegion);
    },