Vue.js 多選列表（Multi-Select）元件

yukiwu發表於2021-03-02
Vue.js元件

搬運公眾號早前文章

多選列表 （Multi-Select） 是一種將所有選項列出，並允許使用者利用 Ctrl/Shift 鍵進行多選的 UI 元素。這是一種常見的設計元素。有時候為了節省空間，我們會將選項摺疊於 Combo Box 中。為了方便使用者操作，這個元件還將新增 Select All 和 Clear All 兩個按鈕，允許使用者快速選擇或清除選擇。這個 UI 元素曾被運用於 Correlation Plot App 中。

preview gif

註冊元件

註冊 Multi-Select 元件，簡單來說就是複製貼上已封裝好的程式碼部分。此處建議註冊全域性元件。

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


呼叫元件

直接新增自定義標籤 呼叫元件。

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


傳遞資料

最後還需要對元件傳遞資料。我們可以利用 v-bind 動態繫結資料到父級元件的資料中。

props 中 legend_name 繫結 Multi-Select 的所需顯示的名稱，columns 繫結 Multi-Select 的選項， selected_columns 繫結當前的已選項。另外我們還需要在父級例項中定義事件 “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;
      },
 },
...


原始碼

Github

相關文章