Vueは州、都市、地区のカスケード選択を実現します

<!--PC コード-->
 <el-form :inline="true" :model="addressForm">
        <el-form-item label="省" label-width="100px" prop="province">
          <el-select v-model="addressForm.province" placeholder="選択してください" style="width:250px" @change="bindProvinceChange">
          <!-- :value="item.value+'|'+item.label" 番号と州名の両方を取得したい場合は、値の割り当てを次のように記述し、| で切り取ります。両方を取得する必要がない場合は、片方だけ割り当てます。 -->
            <el-option v-for="provinceList 内の項目" :label="item.label" :value="item.value+'|'+item.label"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="市" label-width="100px" prop="city">
          <el-select v-model="addressForm.city" placeholder="選択してください" style="width:250px" @change="bindCityChange">
            <el-option v-for="cityList 内の項目" :label="item.label" :value="item.value+'|'+item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区/郡" label-width="100px" prop="郡">
          <el-select v-model="addressForm.county" placeholder="選択してください" style="width:250px" @change="bindCountyChange">
            <el-option v-for="countyList 内の項目" :label="item.label" :value="item.value+'|'+item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通り/町名" label-width="100px" prop="通り">
          <el-input type="textarea" :rows="3" resize="none" placeholder="住所情報を入力してください" v-model="addressForm.street"
            スタイル="幅:250px">
          </el-input>
        </el-form-item>
</el-form>

var アプリ = 新しい Vue({
      el: '#app',
       データ： {
    アドレスフォーム: {
           州： ''、
           市： ''、
           郡: ''、
           通り： ''
         },
         // 州、都市、地区のデータは別のファイルに配置されます。私は別のファイルから ProvinceList を直接インポートしています: areaList.provinceList、
         都市リスト: [],
         郡リスト: []
  },
  方法:{
   // 州 bindProvinceChange(vals) {
         // 州に対応する一意の番号を取得します console.log('data========>', vals)
           arr = vals.split('|') とします。
           this.addressForm.province = arr[1]
           this.addressForm.city = '';
           this.addressForm.county = '';
           this.addressForm.street = '';
           // 対応する都市を取得します。this.cityList = this.addrInit(2, areaList.cityList, arr[0]);
         },
         // 都市bindCityChange(vals) {
           console.log('vals------->', vals)
           this.addressForm.county = '';
           this.addressForm.street = '';
           arr = vals.split('|') とします。
           this.addressForm.city = arr[1]
            // 対応する地区と郡を取得します。 this.countyList = this.addrInit(4, areaList.countyList, arr[0]);
         },
         //地区と郡 bindCountyChange(vals) {
           console.log('vals------======>', vals)
           this.addressForm.street = '';
           arr = vals.split('|') とします。
           this.addressForm.county = arr[1]
         },
         // オブジェクトを配列に変換する transArray(obj) {
           arr = [] とします。
           for (let i in obj) {
             arr.push(obj[i]);
           }
           arr を返します。
         },
         /**
          * カプセル化方法 - 対応する州、都市、地区を取得します* @param {number} num インターセプトする桁数* @param {*} list クエリする配列* @param {*} str インターセプトする文字列* @returns
          */
         addrInit(数値、リスト、文字列) {
           strSub = str.substr(0, num);とします。
           arr = this.transArray(リスト) とします。
           newArr = arr.filter(function (val, index, arr) {
             newStr = val.value.substr(0, num); とします。
             newStr == strSub を返します。
           });
           newArr を返します。
         },
  }
 })