最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカルデータを使用しており、実装のロジックは少し複雑です。ここで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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 要素の高さを下から上へ、上から下へ制御する CSS メソッド
>>: Docker+nextcloudで個人用クラウドストレージシステムを構築
コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...
目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...
序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...
序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...
異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...
MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...
目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...
目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...
目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...
セルでは、暗い境界線の色を個別に定義できます。基本的な構文<TD ボーダーコロダーク=colo...
序文この記事では、TS の基本的な概念ではなく、プロジェクトで TypeScript (以下、TS ...
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
序文MySQL と Oracle のキーワードはまったく同じではありません。Oracle データベー...