Vue多選択リストコンポーネントの詳細

多選択リスト（Multi-Seelect）は、すべてのオプションを一覧表示し、Ctrl/Shiftキーを利用して複数選択できるUI要素である。これはよくあるデザイン要素です。スペースを節約するために、コンボボックスにオプションを折りたたみます。ユーザ操作を容易にするために、このコンポーネントはまた、Select AllとClear Allの2つのボタンを追加し、ユーザが選択を迅速に選択またはクリアすることができる。このUI要素は、Correlation Plot Appで使用されていた。

登録コンポーネント
Multi-Seelectコンポーネントを登録します。簡単に言えば、パッケージされたコード部分をコピーして貼り付けます。グローバルコンポーネントの登録を推奨します。
この要素を設計する時、2つのモードを考慮しました。1つ目は新しいオプションをクリックするたびに古いオプションを保持し、上の図のように新しいオプションを追加します。これは比較的一般的な方法です。二つ目は新しいオプションをクリックするたびに古いオプションをクリアして新しいオプションだけを残します。このような方式で複数選択すると、Ctrl/Shiftキーが必要です。このデザインはユーザーが毎回クリックして古いオプションを削除するのに便利です。第2の方法を使用すると、代替イベント@click.exact="AddToOrDeleteFromSelectedColumns"が@click.exact="ClickOnColumnListItem"である必要がある。

<script type="text/x-template" id="multi-select-template">
…
   <tr v-for = "(item,index) in columns" 
     @click.exact="AddToOrDeleteFromSelectedColumns"
     @click.shift.exact="AddMultipleToSelectedColumns"
     @click.ctrl.exact="AddToOrDeleteFromSelectedColumns"
     :title="function(item){if(item.longname){return 'Short Name: ' + item.name + '
----------------
' + item.longname}else{return item.name}}(item)"
     class="column-list-entry">
   ...
   </tr>
</script>
<script>
Vue.component("multi-select", {
  template: "#multi-select-template",
…
</script>

コンポーネントを呼び出す
カスタムラベルを直接追加してコンポーネントを呼び出します。

<multi-select :legend_name="legend_name"
       :columns="columns"
       :selected_columns="selected_columns"
       @update_selected_columns="onSelectedColumnsChange">
</multi-select>

データを転送
最後に、コンポーネントにデータを転送する必要があります。v-bind動的バインディングデータを親レベルコンポーネントのデータに利用できます。
props中legend_nameバインディングMulti-Selected_現在のオプションをcolumnsでバインドします。また、Multi-SCelectコンポーネントの表示を更新するために、イベント「onSelectedColumnsChange」を親レベルの例で定義する必要があります。

data: function(){
   return {
     legend_name: "Input Columns",
     columns: 
     [
       {"name":"A","longname":"Copper"},
       {"name":"B","longname":"Aluminum Aluminum"},
       {"name":"C","longname":"Calcium"},
       {"name":"D","longname":"Calcium"},
   ],
     selected_columns: [],
   }
 },
... 
methods:{ 
   onSelectedColumnsChange:function(new_columns) {
     this.selected_columns = new_columns;
   },
 },
...

ここで、Vue多選択リストコンポーネントについて詳しく説明した文章を紹介します。Vue多選択リストコンポーネントの内容については、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。