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

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

最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカルデータを使用しており、実装のロジックは少し複雑です。ここでPC側の概要をリストして共有します。モバイル側のコードも同様です。HTMLを除いて、残りは必要に応じてコピーして使用できます。これが皆さんのお役に立てば幸いです。

1. レンダリング

PCの副作用の写真:

モバイル端末効果図:

2. 実装ロジック

ここでの私の実装ロジックは、まず州を通じて都市を取得し、次に都市を通じて地区と郡を取得することです。通りは固定されていないため、ユーザーが自分で入力できるようにします。対応する都市エリアを取得するロジックは次のとおりです。各省、市、区、郡には固有のコードがあり、省コードの最初の 2 桁は市と同じであるため、市はインターセプションによって除外できます。また、市コードの最初の 4 桁は区と郡と同じであるため、区と郡もインターセプションによって除外できます。

PC 側の実装には element-ui フレームワークの select コンポーネントを使用したため、州、市、地区のデータ構造は次のようになります。

モバイル端末は、vantフレームワークのvan-pickerコンポーネントを使用して実装されています。データ構造はPC端末とは異なり、省、市、地区のデータ構造は次のようになります。

3. 関連コード

<!--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>

このセクションのコードは基本的に同じです。唯一の違いは、モバイル端末の onchange イベントで一意の番号を直接取得でき、PC 側のようにカットする必要がないことです。必要に応じて変更できます。

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 を返します。
         },
  }
 })

これが皆さんのお役に立てば幸いです! !

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+ElementUI に基づいて州、市、地区の住所を選択するための一般的なコンポーネント
  • Vue はモバイル端末の州、都市、地区の選択を実装します
  • Vue は携帯電話で州、都市、地区の選択を実装します
  • Vue.jsは京東の省、市、地区の3階層リンクの選択コンポーネントサンプルコードを模倣します
  • Vue の州、都市、地区の 3 リンク ドロップダウン選択コンポーネントの実装

<<:  要素の高さを下から上へ、上から下へ制御する CSS メソッド

>>:  Docker+nextcloudで個人用クラウドストレージシステムを構築

推薦する

CSSコンテンツ属性の具体的な使用法

コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...

MySQL タイムスタンプ比較クエリで遭遇する落とし穴と解決策

目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...

バッテリー残量が少なくなったときに Linux を自動シャットダウンする方法

序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...

MySQL でデータベースを作成した後、ユーザー 'root'@'%' によるデータベース 'xxx' へのアクセスが拒否される問題を解決する

序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

Mysql 中国語ソートルールの説明

MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...

JavaScript を使用した数独の完全な実装プロセス

目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

TypeScript の関数

目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

HTML テーブル マークアップ チュートリアル (30): セルの暗い境界線の色属性 BORDERCOLORDARK

セルでは、暗い境界線の色を個別に定義できます。基本的な構文<TD ボーダーコロダーク=colo...

React プロジェクトにおける TypeScript の使用の概要

序文この記事では、TS の基本的な概念ではなく、プロジェクトで TypeScript (以下、TS ...

Windows Server 2012 でファイル サーバーを構築するための詳細な手順

ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...

MySQL 5.7 のキーワードと予約語の詳細な説明

序文MySQL と Oracle のキーワードはまったく同じではありません。Oracle データベー...