快捷導(dǎo)航

Vue多選列表組件深入詳解

更新時間：2021年03月02日 15:56:35 作者：yukiwu

這篇文章主要介紹了Vue多選列表組件深入詳解，這個是vue的基本組件，有需要的同學(xué)可以研究下

多選列表（Multi-Select）是一種將所有選項列出，并允許用戶利用 Ctrl/Shift 鍵進(jìn)行多選的 UI 元素。這是一種常見的設(shè)計元素。有時候為了節(jié)省空間，我們會將選項折疊于 Combo Box 中。為了方便用戶操作，這個組件還將添加 Select All 和 Clear All 兩個按鈕，允許用戶快速選擇或清除選擇。這個 UI 元素曾被運用于 Correlation Plot App 中。

注冊組件

注冊 Multi-Select 組件，簡單來說就是復(fù)制粘貼已封裝好的代碼部分。此處建議注冊全局組件。

設(shè)計該元素的時候考慮了兩種模式：第一種是每次點擊新選項將保留舊選項并添加新選項，如上述示例圖形。這種是較為常見的一種方式。第二種是每次點擊新選項則清除舊選項僅保留新選項。若使用這種方式進(jìn)行多選，則需要利用Ctrl/Shift鍵。這種設(shè)計能便于用戶在每一次的點擊中消除舊選項。若使用第二方式，需要替換事件@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 + '\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>

調(diào)用組件

直接添加自定義標(biāo)簽調(diào)用組件。

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

傳遞數(shù)據(jù)

最后還需要對組件傳遞數(shù)據(jù)。我們可以利用 v-bind 動態(tài)綁定數(shù)據(jù)到父級組件的數(shù)據(jù)中。

props 中 legend_name 綁定 Multi-Select 的所需顯示的名稱，columns 綁定 Multi-Select 的選項， selected_columns 綁定當(dāng)前的已選項。另外我們還需要在父級實例中定義事件 “onSelectedColumnsChange”，用于刷新 Multi-Select 組件的顯示。

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

到此這篇關(guān)于Vue多選列表組件深入詳解的文章就介紹到這了,更多相關(guān)Vue多選列表組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: