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

不言
リリース: 2018-05-04 14:51:56
オリジナル
1414 人が閲覧しました

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート