この記事では、主に州、市、地区の 3 レベルの連携や地域データの追加と削除など、全国の地域データの操作に使用される vue 地域選択コンポーネントの紹介に焦点を当てています。 vue 地域選択コンポーネントの詳細なチュートリアルは必須です。お友達は参照してください
概要
は主に、州、市、および市の 3 レベルのリンクを含む、全国の地域データの操作に使用されます。地域データを操作する場合、以前からツリー形状も使用していましたが、大量の地域データを操作すると描画が遅くなるため、別のデータ表示に変更しました。フォームと相互作用フォームがあるため、このコンポーネントが得られます。
注: このコンポーネントは vue.js コンポーネントです
デモ
デモするにはここをクリックしてください
API
Props
パラメータ | タイプ | 説明 |
---|---|---|
エリア | 配列 | 受信コンポーネントエリアデータ |
イベント
イベント名 | パラメータ | 説明 |
---|---|---|
選択された | エリア | コンポーネント内の選択された領域 |
詳細説明
Props
area
area このパラメータは必須であり、コンポーネントの初期化時の領域データを表します。空にすることもできます。 area は複数のオブジェクトを含む配列であり、各オブジェクトのデータ構造は次のとおりです。
... area: [ {Name: '北京', ID: '01'}, {Name: '南京', ID: '0401'}, {Name: '西湖区', ID: '060105'} ], ...
後ほど実際に使用してみると、背景が領域の ID 値のみを返す場合があることがわかったので、ここで最適化後は、次のような ID の値のみを渡すことができます:
... area: [ {ID: '01'}, {ID: '0401'}, {ID: '060105'} ], ...
selected
selected は、コンポーネントによって内部的に公開されるイベントです。コンポーネントの外部でこのイベントをサブスクライブできます。戻り値を取得します。値は、コンポーネントによって現在選択されているすべての領域です。戻り値は、領域データを含む複数のオブジェクトで構成される配列です。データ構造は、単純な例
と同じです。
インストールと使用グローバルコンポーネントとして使用する場合npm install adc-addressmap
<p> <addressmap :area="area" @selected="selected"></addressmap> </p>
以上がVue領域選択コンポーネントチュートリアルの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。