Vue領域選択コンポーネントチュートリアルの詳細説明

この記事では、主に州、市、地区の 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 サイトの他の関連記事を参照してください。