Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選択できるようにする UI 要素です。これは一般的なデザイン要素です。場合によっては、スペースを節約するために、オプションをコンボ ボックスに折りたたむことがあります。ユーザーの操作を容易にするために、このコンポーネントには「すべて選択」と「すべてクリア」の 2 つのボタンも追加され、ユーザーは選択をすばやく選択またはクリアできます。この UI 要素は、以前は相関プロット アプリで使用されていました。

コンポーネントの登録

Multi-Select コンポーネントの登録は、カプセル化されたコードをコピーして貼り付けるだけです。ここでグローバル コンポーネントを登録することをお勧めします。

この要素は、2 つのモードを念頭に置いて設計されています。1 つ目は、上の例のグラフィックに示すように、新しいオプションをクリックするたびに古いオプションが保持され、新しいオプションが追加されるというものです。これはより一般的な方法です。 2 つ目は、新しいオプションをクリックするたびに、古いオプションがクリアされ、新しいオプションのみが保持されることです。この方法を使用して複数選択を行う場合は、Ctrl/Shift キーを使用する必要があります。この設計により、ユーザーはクリックするたびに古いオプションを簡単に削除できます。 2 番目の方法を使用する場合は、イベント@click.exact="AddToOrDeleteFromSelectedColumns" @click.exact="ClickOnColumnListItem"に置き換える必要があります。

<script type="text/x-template" id="複数選択テンプレート">
…
   <tr v-for = "(item,index) in columns" 
     @click.exact="選択した列に追加または削除"
     @click.shift.exact="選択した列に複数追加"
     @click.ctrl.exact="選択した列に追加または削除"
     :title="function(item){if(item.longname){return '短縮名: ' + item.name + '\n----------------\n' + item.longname}else{return item.name}}(item)"
     クラス="列リストエントリ">
   ...
   </tr>
</スクリプト>
<スクリプト>
Vue.component("複数選択", {
  テンプレート: "#multi-select-template",
…
</スクリプト>

コンポーネントの呼び出し

カスタムタグを直接追加するコンポーネントを呼び出します。

<複数選択:凡例名="凡例名"
       :columns="列"
       :selected_columns="選択された列"
       @update_selected_columns="選択された列の変更時">
</複数選択>

データの受け渡し

最後に、データをコンポーネントに渡す必要があります。 v-bind を使用すると、データを親コンポーネントのデータに動的にバインドできます。

props では、legend_name は Multi-Select で表示する必要がある名前にバインドされ、columns は Multi-Select のオプションにバインドされ、selected_columns は現在選択されている項目にバインドされます。さらに、Multi-Select コンポーネントの表示を更新するために、親インスタンスでイベント「onSelectedColumnsChange」を定義する必要もあります。

データ: 関数(){
   戻る {
     legend_name: "入力列",
     列: 
     [
       {"name":"A","longname":"銅"},
       {"name":"B","longname":"アルミニウム アルミニウム"},
       {"name":"C","longname":"カルシウム"},
       {"name":"D","longname":"カルシウム"},
   ]、
     選択された列: [],
   }
 },
... 
方法:{ 
   onSelectedColumnsChange:function(new_columns) {
     this.selected_columns = 新しい列;
   },
 },
...

これで、Vue マルチ選択リスト コンポーネントの詳細な説明は終了です。Vue マルチ選択リスト コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。