promise再爱我一次之省市区范围选择

0. 背景

省市区选择嘛，懂得都懂。后台返回我1个Object对象，装着全国的省，选择省后依次选择市、区。我没想到这玩意可以纠缠我快三小时的。

1. 难点

prov city area 省 市 区

省可以默认拿一下，市区都需要依靠前面的选择生成。一般watch一下prov/city值就行了是吧，但我这个憨憨，用了el-form。这两个值成为对象中的数值，直接watch是不行了的，（我用/deep/也不行，😓）。但是，我们有机智的computed啊！所以~

2. 解决

  computed: {
    prov: {
      get() {
        return this.form.regionProv;
      },
    },
    city: {
      get() {
        return this.form.regionCity;
      },
    },
    }
  watch: {
  // When change prov OR city, region value after it need clear.
    prov() {
      this.getRegion();
      this.form.regionCity = "";
      this.form.regionArea = "";
    },
    city() {
      this.getRegion();
      this.form.regionArea = "";
    },
  },

上面的是先把prov city这两个需要监听的值，从this.form这个对象中分离出来。真正实现获取省市区数据的还是靠这个方法：

    async getRegion() {
      if (this.form.regionProv === "") {
        this.regionProvArr = await getRegion(0).then((res) => {
          return res.data;
        });
      } else {
        if (this.form.regionCity === "") {
          this.regionCityArr = await getRegion(this.form.regionProv).then(
            (res) => {
              return res.data;
            }
          );
        } else {
          if (this.form.regionArea === "") {
            this.regionAreaArr = await getRegion(this.form.regionCity).then(
              (res) => {
                return res.data;
              }
            );
          }
        }
      }
    },

注意这里的async await，不加得到的是promise中的！！！

3. 优化

我在使用中，优化了一个版本。有时候会有更改市，区也跟着变，或者更改省，市区都变得情况。

// template

      <el-form-item label="所属区域" prop="district">
        <el-select
          v-model="form.province"
          clearable
          filterable
          @change="getCities"
        >
          <el-option
            v-for="item in Object.keys(provinces)"
            :key="item"
            :label="provinces[item]"
            :value="item"
          ></el-option>
        </el-select>
        <el-select
          v-model="form.city"
          style="margin-left: 10px"
          clearable
          filterable
          @change="getDistricts"
        >
          <el-option
            v-for="item in Object.keys(cities)"
            :key="item"
            :label="cities[item]"
            :value="item"
          ></el-option>
        </el-select>
        <el-select
          v-model="form.district"
          style="margin-left: 10px"
          clearable
          filterable
        >
          <el-option
            v-for="item in Object.keys(districts)"
            :key="item"
            :label="districts[item]"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

// methods

获取省市区的方法

    async getRegions(num) {
      switch (num) {
        case 0:
          this.provinces = await getRegions(0).then((res) => {
            return res.data;
          });
          break;
        case 1:
          this.cities = await getRegions(this.form.province).then((res) => {
            return res.data;
          });
          break;
        case 2:
          this.districts = await getRegions(this.form.city).then((res) => {
            return res.data;
          });
          break;
        default:
          break;
      }
    },

注意，如果省 prov 或者 市 city 改变变对应的值。这里的getCities就是在省改变后做出的新的变动。

        <el-select
          v-model="form.province"
          clearable
          filterable
          @change="getCities"
        >
              ...
                  <el-select
          v-model="form.city"
          style="margin-left: 10px"
          clearable
          filterable
          @change="getDistricts"
        >

    getCities() {
      this.form.city = "";
      this.form.district = "";
      this.cities = [];
      this.districts = [];
      this.getRegions(1);
    },
    getDistricts() {
      this.form.district = "";
      this.districts = [];
      this.getRegions(2);
    },

所属行业的选择同理。初始化的时候也要注意

        this.getIndustryList(0); // industryType
        this.getIndustryList(1); // industryTypeMedium
        this.getIndustryList(2); // industryTypeLimit
        this.getRegions(0); // province
        this.getRegions(1); // city
        this.getRegions(2); // area