In-depth explanation of Vue multi-select list component

A Multi-Select is a UI element that lists all options and allows users to make multiple selections using the Ctrl/Shift keys. This is a common design element. Sometimes, in order to save space, we will collapse the options into a Combo Box. To facilitate user operation, this component will also add two buttons, Select All and Clear All, allowing users to quickly select or clear the selection. This UI element was previously used in the Correlation Plot App.

Registering Components

Registering the Multi-Select component is as simple as copying and pasting the encapsulated code. It is recommended to register global components here.

This element was designed with two modes in mind: The first is that each click on a new option will keep the old options and add the new one, as shown in the example graphic above. This is a more common method. The second is that each time you click a new option, the old option is cleared and only the new option is retained. If you use this method to make multiple selections, you need to use the Ctrl/Shift key. This design makes it easy for users to eliminate old options with each click. If you use the second method, you need to replace the event @click.exact="AddToOrDeleteFromSelectedColumns" with @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 + '\n----------------\n' + item.longname}else{return item.name}}(item)"
     class="column-list-entry">
   ...
   </tr>
</script>
<script>
Vue.component("multi-select", {
  template: "#multi-select-template",
…
</script>

Calling Components

Add custom tags directly Call the component.

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

Passing Data

Finally, data needs to be passed to the component. We can use v-bind to dynamically bind data to the data of the parent component.

In props, legend_name is bound to the name that Multi-Select needs to display, columns is bound to the options of Multi-Select, and selected_columns is bound to the currently selected item. In addition, we also need to define the event "onSelectedColumnsChange" in the parent instance to refresh the display of the Multi-Select component.

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;
   },
 },
...

This concludes this article on the in-depth explanation of the Vue multi-select list component. For more relevant Vue multi-select list component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!