Vue-Treeselect 中文文檔深入解析

一、介紹

Vue treeselect 是一個易於使用，高效，具有可定製和實用功能的多選下拉菜單組件。它使用Vue.js組件系統，支持按需渲染選項和動態搜索，並能夠呈現任意類型的數據。

Vue-Treeselect的設計旨在創造出一種友好的、可交互的多選下拉菜單，其中包括通過前端展示用戶需要查詢的內容，同時也支持後端通過Ajax等方式返回查詢列表數據的多選下拉框組件。

通常，當我們需要展示包含多個數據層級的結構時，會用到嵌套的下拉菜單。而Vue-Treeselect能更好地實現這種需求。

二、如何使用Vue treeselect

Vue-Treeselect是一個Vue組件，使用它前你需要保證Vue.js已經被加載了，由此需要在HTML頁面中先引入Vue.js庫。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>vue-treeselect</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-treeselect@0.4.0/dist/vue-treeselect.css">
  <script src="//unpkg.com/vue-treeselect@0.4.0/dist/vue-treeselect.min.js"></script>
</head>
<body>
  <div id="app">
    <vue-treeselect ...></vue-treeselect>
  </div>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>

上述代碼中，我們需要引入vue.js和vue-treeselect.css，這樣才能利用CSS樣式表，否則我們將看到一個不可視的Vue-Treeselect。此外，在調用組件時，還需要使用Vue構造函數生成根Vue實例的示例，並且使用vue-treeselect組件進行渲染。

當我們使用Vue-Treeselect進行渲染時，還需要針對組件提供一些必要的選項，其中最顯著的是：“options”, 它包含嵌套選項來渲染組件。下面是重要的選項清單，它包括組件支持的一些重要屬性和方法：


{
  /* 選項數據 */
  options: [ ],

  /* 選中的值 */
  value: [ ],

  /* 刪除選項時的提示 */
  deleteRemovalConfirmation: true,

  /* 是否使用遠程搜索 */
  remote: false,

  /* 可輸入自定義 */
  allowInput: false,

  /* 自適應 */
  autoPosition: false,

  /* 選中時事件處理 */
  onChange(selectedValues, selectedOptions) {
    // ...
  },

  /* 遠程搜索事件處理 */
  loadOptionsAsync(searchInput, loadedOptions) {
    // ...
  }
}

三、Vue-Treeselect的選項屬性

Vue treeselect組件中可以使用的options數據是一個樹形數組。每一個節點都包括以下屬性：

id: 傳遞到onChange事件回調中，等價於valueKey。
label: 顯示在tree select中的文本。
children: 包含選項或子節點的數組。
hasChildren: 對於使用異步加載數據的情況，可以使用此屬性進行加載更多節點。
parentId: 渲染樹時的父節點的id屬性。
…: 你可以在數據中添加自定義屬性，在組件回調時使用。

四、Vue-Treeselect的事件

Vue-Treeselect提供了onChange和loadOptionsAsync兩個事件，以響應組件的行為。

當選項發生改變時，onChange會被觸發，並且會傳遞已選值（以數組的形式）和已選選項（已選值的引用）作為其兩個參數。


{
  onChange(selectedValues, selectedOptions) {
    console.log('Selected Options:', selectedOptions);
  }
}

對於異步加載選項的使用情況，可以使用loadOptionsAsync處理搜索事件。這個函數接受兩個參數：搜索輸入值和一個回調函數，這個回調函數負責更新你的options。


{
  loadOptionsAsync(searchInput, loadedOptions) {
    console.log('loadOptionsAsync:', searchInput, loadedOptions);
  }
}

五、Vue-Treeselect的高級用法

5.1 使用ref屬性進行樹選擇的打開/關閉

在某些情況下，可能需要從父元素（例如一個按鈕或一個鏈接）打開和關閉樹選擇。這時候，我們可以使用ref引入Vue-Treeselect的組件實例（下文實例變量名為 treeSelect），並使用組件內置的打開和關閉方法：openMenu()和closeMenu()：

<vue-treeselect ref="treeSelect"></vue-treeselect>


this.$refs.treeSelect.openMenu();
this.$refs.treeSelect.closeMenu();

5.2 搜索防抖

默認情況下，Vue-Treeselect響應搜索。每當搜索狀態發生變化時，用戶輸入將更新值。Vue-Treeselect使用一個搜索防抖技術（默認時間(750ms)），以防止過度響應搜索。

在某些情況下，該延遲可能無法滿足特定的需求。果需要更改防抖時間，請使用“debounceSearch”選項更改它：

<vue-treeselect :searchable="true" :debounce-search="500"></vue-treeselect>

通過上述代碼，我們可以將默認防抖時間，從750ms更改為500ms，這樣會更靈敏的響應用戶的搜索輸入事件。

5.3 啟用嵌套菜單的多選

默認情況下，Vue-Treeselect不支持對嵌套菜單進行多選。此時需要使用屬性“flattenSearchResults”進行遞歸菜單的多選設置。

<vue-treeselect :flatten-search-results="true"></vue-treeselect>

當將遞歸結果扁平化時，“flatten-search-results”屬性將默認啟用多選效果，以便嵌套菜單中的所有菜單被選中。

5.4 查詢其他非標準選項的配置

在實際應用中，有可能需要在數據中包含某些自定義選項屬性，這些選項屬性不在Vue Treeselect內置的一組標準屬性中。在這種情況下，可藉助Vue Treeselect的“capable”計算屬性和“on-”前綴組合使用來讓Vue Treeselect處理您自定義的屬性。

在Vue Treeselect中，屬性成員變量名稱必須以on-為前綴，如果它不是一個內置屬性名，則成員變量被視為自定義選項，並會傳遞給組件的事件處理程序。下面是一個示例的自定義選項名稱“on-random-int”：


{
  capable: ({ onRandomInt }) => onRandomInt != null,

  onRandomInt(selectedValues, selectedOptions) {
    const randomNode = selectedOptions.find(o => o.onRandomInt != null);
    console.log('Random int =', randomNode.onRandomInt);
  },
}

結語

Vue-Treeselect是一個易於使用、高度定製、易於實用的多選下拉菜單組件。通過Vue Treeselect，我們可以更好地展示多級數據結構，支持搜索、異步加載和自定義事件響應。通過本文的闡述，讀者可以快速上手使用Vue Treeselect，並掌握其基本選項、事件處理和高級設置。

原創文章，作者：AKXSH，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/372144.html