VUE:省市街地のカスケードセレクタを迅速に実現

概要
プロジェクトでは,おおよそのレートでアドレスを選択する必要があるが,コンポーネントが利用可能でない場合には,1つを自分で実現する必要があり,次にVUEプロジェクトをベースに実演する.
具体的な実装
ステップ1:全国アドレスのjsonファイル(上位には下位の依存関係データが含まれ、element-uiのselectセレクタデータの要件に合致する)を用意します.ここでは、ダウンロードリンクの2つ目のステップがあります.element-uiフレームワークをグローバルに導入します.ステップ3:ページにjsonファイルを導入します.第四歩:htmlとJSの方法を書く

<template>
  <div>
    <el-select v-model="formData.provinceCode" @change="provinceChange" placeholder=" ">
      <el-option v-for="it in provinces" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.cityCode" @change="cityChange" placeholder=" " class="address_select">
      <el-option v-for="it in cityList" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
    <el-select v-model="formData.areaCode" @change="areaChange" placeholder=" " class="address_select">
      <el-option v-for="it in areaList" :key="it.value" :label="it.label" :value="it.value"></el-option>
    </el-select>
  </div>
</template>

<script>
import json from "@/assets/json/place.json";
export default {
  data() {
    return {
      provinces: json, //    （          ，          ）
      cityList: [], //          
      areaList: [], //          
      formData: {}
    };
  },
  methods: {
    //   ：   ，           
    provinceChange(event) {
      let chooseProvince = this.provinces.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "province", chooseProvince.label);
      this.cityList = chooseProvince.children;
      this.$set(this.formData, "cityCode", "");
      this.$set(this.formData, "city", "");
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    //   ：   ，           
    cityChange(event) {
      let chooseCity = this.cityList.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "city", chooseCity.label);
      this.areaList = chooseCity.children;
      this.$set(this.formData, "areaCode", "");
      this.$set(this.formData, "area", "");
    },
    //   ：   
    areaChange(event) {
      let chooseArea = this.areaList.find(it => {
        if (it.value === event) {
          return it;
        }
      });
      this.$set(this.formData, "area", chooseArea.label);
      console.log(this.formData);
    }
  }
};
</script>

<style scoped>
</style>

最後に
役に立つと思う方は、あなたの金の指で「いいね」をクリックしたり、コメントしたりして技術を検討してください.