這個好玩又實用的jupyter外掛我真的愛了

阿新 • • 發佈：2022-03-19

Vue Treeselect下拉樹實現，選擇部門下拉樹，下拉樹選單

先來看一張最基本的效果圖：

介紹
vue-treeselect是一個多選元件，具有對Vue.js的巢狀選項支援。

具有巢狀選項支援的單個和多個選擇
模糊匹配
非同步搜尋
延遲載入（僅在需要時載入深層選項的資料）
鍵盤支援（使用Arrow Up＆Arrow Down鍵導航，使用鍵選擇選項Enter等）
豐富的選項和高度可定製
支援各種瀏覽器
需要Vue 2.2+

入門
建議通過npm安裝vue-treeselect，並使用像webpack這樣的捆綁器構建你的應用程式。

npm install --save @riophae/vue-treeselect
此示例顯示如何將vue 
-treeselect與Vue SFC整合。

<!-- Vue SFC -->
<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>
 
<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles 

  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a 
',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>
如果您只是不想使用webpack或其他捆綁包，您還可以在頁面中簡單地包含獨立的UMD版本。這樣，確保在vue-treeselect之前包含Vue作為依賴項。

 
<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->
    <script src="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/[email protected]/dist/vue-treeselect.min.css">
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)
 
    new Vue({
      el: '#app',
      data: {
        // define default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      },
    })
  </script>
</html>
指南
基本功能


此示例演示了vue-treeselect最常用的功能。通過鍵入幾個字母來嘗試模糊匹配功能。



HTML程式碼:

<div>
  <treeselect
    :multiple="true"
    :options="options"
    placeholder="Select your favourite(s)..."
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
</div>
JAVASCRIPT程式碼：

export default {
  data: () => ({
    value: [],
    options: [ {
      id: 'fruits',
      label: 'Fruits',
      children: [ {
        id: 'apple',
        label: 'Apple ?',
        isNew: true,
      }, {
        id: 'grapes',
        label: 'Grapes ?',
      }, {
        id: 'pear',
        label: 'Pear ?',
      }, {
        id: 'strawberry',
        label: 'Strawberry ?',
      }, {
        id: 'watermelon',
        label: 'Watermelon ?',
      } ],
    }, {
      id: 'vegetables',
      label: 'Vegetables',
      children: [ {
        id: 'corn',
        label: 'Corn ?',
      }, {
        id: 'carrot',
        label: 'Carrot ?',
      }, {
        id: 'eggplant',
        label: 'Eggplant ?',
      }, {
        id: 'tomato',
        label: 'Tomato ?',
      } ],
    } ],
  }),
}
您需要學習的第一件事是如何定義選項。有兩種選擇：a。可摺疊且可能有子選項的資料夾選項，以及b。正常選項不是和不是。在這裡，我想借用電腦科學的基本概念，將前者稱為分支節點，將後者稱為葉節點。這兩種節點一起組成樹。

定義葉節點非常簡單：

{
  id: '<id>', // used to identify the option within the tree so it's value must be unique across all options
  label: '<label>', // used to display the option
}
定義分支節點只需要一個額外的children屬性：

{
  id: '<id>',
  label: '<label>',
  children: [
    {
      id: '<child id>',
      label: '<child label>',
    },
    ...
  ],
}
然後你可以傳遞這些節點的陣列作為options道具。請注意，即使您為children屬性分配一個空陣列，它仍然被認為是一個分支節點。這可能與您從電腦科學中學到的不同，在電腦科學中，沒有子節點的節點通常稱為葉節點。

有關node物件中所有可用屬性的資訊，請參閱下文。

更多功能
這表明了更多功能。



HTML程式碼:

<div>
  <treeselect
    name="demo"
    :multiple="multiple"
    :clearable="clearable"
    :searchable="searchable"
    :disabled="disabled"
    :open-on-click="openOnClick"
    :open-on-focus="openOnFocus"
    :clear-on-select="clearOnSelect"
    :close-on-select="closeOnSelect"
    :always-open="alwaysOpen"
    :append-to-body="appendToBody"
    :options="options"
    :limit="3"
    :max-height="200"
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
  <p>
    <label><input type="checkbox" v-model="multiple">Multi-select</label>
    <label><input type="checkbox" v-model="clearable">Clearable</label>
    <label><input type="checkbox" v-model="searchable">Searchable</label>
    <label><input type="checkbox" v-model="disabled">Disabled</label>
  </p>
  <p>
    <label><input type="checkbox" v-model="openOnClick">Open on click</label>
    <label><input type="checkbox" v-model="openOnFocus">Open on focus</label>
  </p>
  <p>
    <label><input type="checkbox" v-model="clearOnSelect">Clear on select</label>
    <label><input type="checkbox" v-model="closeOnSelect">Close on select</label>
  </p>
  <p>
    <label><input type="checkbox" v-model="alwaysOpen">Always open</label>
    <label><input type="checkbox" v-model="appendToBody">Append to body</label>
  </p>
</div>
JAVASCRIPT程式碼：

import { generateOptions } from './utils'
 
export default {
  data: () => ({
    multiple: true,
    clearable: true,
    searchable: true,
    disabled: false,
    openOnClick: true,
    openOnFocus: false,
    clearOnSelect: true,
    closeOnSelect: false,
    alwaysOpen: false,
    appendToBody: false,
    value: [ 'a' ],
    options: generateOptions(2, 3),
  }),
 
  watch: {
    multiple(newValue) {
      if (newValue) {
        this.value = this.value ? [ this.value ] : []
      } else {
        this.value = this.value[0]
      }
    },
  },
}
延遲載入
如果您有大量深層巢狀選項，則可能需要在初始載入時僅載入最高級別的選項，並僅在需要時載入其餘選項。您可以通過以下步驟實現這一目標：

通過設定宣告一個解除安裝的分支節點children: null
新增loadOptions道具
每當解除安裝的分支節點被擴充套件時，loadOptions({ action, parentNode, callback, instanceId })將被呼叫，然後您可以執行從遠端伺服器請求資料的作業


HTML程式碼：

<treeselect
  :multiple="true"
  :options="options"
  :load-options="loadOptions"
  placeholder="Try expanding any folder option..."
  v-model="value"
  />
JAVASCRIPT程式碼：

import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 
// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.
const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}
 
export default {
  data: () => ({
    value: null,
    options: [ {
      id: 'success',
      label: 'With children',
      // Declare an unloaded branch node.
      children: null,
    }, {
      id: 'no-children',
      label: 'With no children',
      children: null,
    }, {
      id: 'failure',
      label: 'Demonstrates error handling',
      children: null,
    } ],
  }),
 
  methods: {
    loadOptions({ action, parentNode, callback }) {
      // Typically, do the AJAX stuff here.
      // Once the server has responded,
      // assign children options to the parent node & call the callback.
 
      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {
        case 'success': {
          simulateAsyncOperation(() => {
            parentNode.children = [ {
              id: 'child',
              label: 'Child option',
            } ]
            callback()
          })
          break
        }
        case 'no-children': {
          simulateAsyncOperation(() => {
            parentNode.children = []
            callback()
          })
          break
        }
        case 'failure': {
          simulateAsyncOperation(() => {
            callback(new Error('Failed to load options: network error.'))
          })
          break
        }
        default: /* empty */
        }
      }
    },
  },
}
也可以將根級別選項載入延遲。如果最初沒有註冊選項（options: null），則vue-treeselect將嘗試loadOptions({ action, callback, instanceId })在安裝元件後通過呼叫載入根選項。在此示例中，我通過設定禁用了自動載入功能autoLoadRootOptions: false，並且在開啟選單時將載入根選項。




HTML程式碼：

<treeselect
  :load-options="loadOptions"
  :options="options"
  :auto-load-root-options="false"
  :multiple="true"
  placeholder="Open the menu..."
  />
JAVASCRIPT程式碼：

import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
 
const sleep = d => new Promise(r => setTimeout(r, d))
let called = false
 
export default {
  data: () => ({
    options: null,
  }),
 
  methods: {
    // You can either use callback or return a Promise.
    async loadOptions({ action/*, callback*/ }) {
      if (action === LOAD_ROOT_OPTIONS) {
        if (!called) {
          // First try: simulate an exception.
          await sleep(2000) // Simulate an async operation.
          called = true
          throw new Error('Failed to load options: test.')
        } else {
          // Second try: simulate a successful loading.
          await sleep(2000)
          this.options = [ 'a', 'b', 'c', 'd', 'e' ].map(id => ({
            id,
            label: `option-${id}`,
          }))
        }
      }
    },
  },
}
非同步搜尋
vue-treeselect支援在使用者輸入時動態載入和更改整個選項列表。預設情況下，vue-treeselect將快取每個AJAX請求的結果，因此使用者可以等待更少。


HTML程式碼：

<treeselect
  :multiple="true"
  :async="true"
  :load-options="loadOptions"
  />
JAVASCRIPT程式碼：

import { ASYNC_SEARCH } from '@riophae/vue-treeselect'
 
const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000)
}
 
export default {
  methods: {
    loadOptions({ action, searchQuery, callback }) {
      if (action === ASYNC_SEARCH) {
        simulateAsyncOperation(() => {
          const options = [ 1, 2, 3, 4, 5 ].map(i => ({
            id: `${searchQuery}-${i}`,
            label: `${searchQuery}-${i}`,
          }))
          callback(null, options)
        })
      }
    },
  },
}

平面模式和排序值
在前面的所有示例中，我們使用了vue-treeselect的預設非平面模式，這意味著：

每當檢查分支節點時，也會檢查其所有子節點
每當分支節點檢查所有子節點時，也將檢查分支節點本身
有時我們不需要該機制，並且希望分支節點和葉節點不會相互影響。在這種情況下，應使用平面模式，如下所示。

如果要控制顯示所選選項的順序，請使用sortValueByprop。這個道具有三個選擇：

"ORDER_SELECTED" （預設） - 已選擇訂單
"LEVEL" - 選項等級：C?BB?AAA
"INDEX" - 期權指數：AAA?BB?C



HTML程式碼：

<div>
  <treeselect
    :multiple="true"
    :options="options"
    :flat="true"
    :sort-value-by="sortValueBy"
    :default-expand-level="1"
    placeholder="Try selecting some options."
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
  <p><strong>Sort value by:</strong></p>
  <p class="options">
    <label><input type="radio" value="ORDER_SELECTED" v-model="sortValueBy">Order selected</label>
    <label><input type="radio" value="LEVEL" v-model="sortValueBy">Level</label>
    <label><input type="radio" value="INDEX" v-model="sortValueBy">Index</label>
  </p>
</div>
JAVASCRIPT程式碼：

import { generateOptions } from './utils'
 
export default {
  data() {
    return {
      value: [ 'c', 'aaa', 'bb' ],
      options: generateOptions(3),
      sortValueBy: 'ORDER_SELECTED',
    }
  },
}
防止價值組合
對於非平面和多選模式，如果檢查了分支節點及其所有後代，則vue-treeselect將它們組合到值陣列中的單個專案中，如以下示例所示。通過使用valueConsistsOfprop，您可以更改該行為。這個道具有四個選擇：

"ALL"- 任何已檢查的節點都將包含在value陣列中
"BRANCH_PRIORITY"（預設） - 如果選中了分支節點，則將在value陣列中排除其所有後代
"LEAF_PRIORITY"- 如果選中了一個分支節點，該節點本身及其分支後代將從value陣列中排除，但它的葉子後代將被包含在內
"ALL_WITH_INDETERMINATE"- 任何已檢查的節點都將包含在value陣列中，加上不確定的節點

HTML程式碼：

<div>
  <treeselect
    :multiple="true"
    :options="options"
    :value-consists-of="valueConsistsOf"
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
  <p><strong>Value consists of:</strong></p>
  <p class="options">
    <label><input type="radio" value="ALL" v-model="valueConsistsOf">All</label><br>
    <label><input type="radio" value="BRANCH_PRIORITY" v-model="valueConsistsOf">Branch priority</label><br>
    <label><input type="radio" value="LEAF_PRIORITY" v-model="valueConsistsOf">Leaf priority</label><br>
    <label><input type="radio" value="ALL_WITH_INDETERMINATE" v-model="valueConsistsOf">All with indeterminate</label>
  </p>
</div>

JAVASCRIPT程式碼：  

export default {
  data: () => ({
    value: [ 'team-i' ],
    valueConsistsOf: 'BRANCH_PRIORITY',
    options: [ {
      id: 'company',
      label: 'Company ?',
      children: [ {
        id: 'team-i',
        label: 'Team I ?',
        children: [ {
          id: 'person-a',
          label: 'Person A ?',
        }, {
          id: 'person-b',
          label: 'Person B ?',
        } ],
      }, {
        id: 'team-ii',
        label: 'Team II ?',
        children: [ {
          id: 'person-c',
          label: 'Person C ?',
        }, {
          id: 'person-d',
          label: 'Person D ?',
        } ],
      }, {
        id: 'person-e',
        label: 'Person E ?',
      } ],
    } ],
  }),
}

您可以通過設定isDisabled: true任何葉節點或分支節點來禁用專案選擇。對於非平面模式，在分支節點上設定也將禁用其所有後代。

HTML程式碼：

<treeselect
  :multiple="true"
  :options="options"
  :value="value"
  />
JAVASCRIPT程式碼：

export default {
  data: () => ({
    options: [ {
      id: 'folder',
      label: 'Normal Folder',
      children: [ {
        id: 'disabled-checked',
        label: 'Checked',
        isDisabled: true,
      }, {
        id: 'disabled-unchecked',
        label: 'Unchecked',
        isDisabled: true,
      }, {
        id: 'item-1',
        label: 'Item',
      } ],
    }, {
      id: 'disabled-folder',
      label: 'Disabled Folder',
      isDisabled: true,
      children: [ {
        id: 'item-2',
        label: 'Item',
      }, {
        id: 'item-3',
        label: 'Item',
      } ],
    } ],
    value: [ 'disabled-checked' ],
  }),
}
巢狀搜尋
有時我們需要在特定分支內搜尋選項的可能性。例如，你的分店是不同的餐館，葉子是他們訂購的食物。要搜尋“McDonals”餐廳的沙拉訂單，只需搜尋“mc salad”。您也可以嘗試搜尋“沙拉”來感受差異。

具體來說，您的搜尋查詢會在空格上分割。如果在節點的路徑中找到每個分割的字串，那麼我們匹配。

HTML程式碼：

<treeselect
  :multiple="true"
  :options="options"
  :disable-branch-nodes="true"
  v-model="value"
  search-nested
  />
JAVASCRIPT程式碼：

export default {
  data: () => ({
    value: null,
    options: [ {
      key: 'a',
      name: 'a',
      subOptions: [ {
        key: 'aa',
        name: 'aa',
      } ],
    } ],
    normalizer(node) {
      return {
        id: node.key,
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}
自定義選項標籤
您可以自定義每個選項的標籤。vue-treeselect利用了Vue的作用域插槽功能，並提供了一些你應該在自定義模板中使用的道具：

node- 一個規範化的節點物件（請注意，這與您從normalizer()prop 返回的內容不同）
count＆shouldShowCount- 計數和布林值表示是否應顯示計數
labelClassName＆countClassName- 使樣式正確的CSS類名


HTML程式碼：

<treeselect
  :options="options"
  :value="value"
  :searchable="false"
  :show-count="true"
  :default-expand-level="1"
  >
  <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName">
    {{ node.isBranch ? 'Branch' : 'Leaf' }}: {{ node.label }}
    <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
  </label>
</treeselect>
JAVASCRIPT程式碼：

import { generateOptions } from './utils'
 
export default {
  data: () => ({
    value: null,
    options: generateOptions(2),
  }),
}
自定義值標籤
您可以自定義有價物品的標籤（多項選擇時的每個專案）。vue-treeselect利用了Vue的作用域插槽功能，並提供了一些你應該在自定義模板中使用的道具：

node- 一個規範化的節點物件（請注意，這與您從normalizer()prop 返回的內容不同）


HTML程式碼：

<div>
  <treeselect :options="options" :value="value" :multiple="multiple">
    <div slot="value-label" slot-scope="{ node }">{{ node.raw.customLabel }}</div>
  </treeselect>
  <p>
    <label><input type="checkbox" v-model="multiple">Multi-select</label>
  </p>
</div>
JAVASCRIPT程式碼：

export default {
  data: () => ({
    multiple: true,
    value: null,
    options: [ 1, 2, 3 ].map(i => ({
      id: i,
      label: `Label ${i}`,
      customLabel: `Custom Label ${i}`,
    })),
  }),
}
Vuex支援
在前面的所有示例中，我們用於v-model在應用程式狀態和vue-treeselect之間同步值，也稱為雙向資料繫結。如果你正在使用Vuex，我們可以使用:value和@input，因為v-model它只是Vue 2中的語法糖。

具體而言，我們可以繫結getter到:value使VUE-treeselect反映您Vuex狀態的任何變化，並結合action或mutation以@input更新您的Vuex狀態每當值改變。

HTML程式碼：

<div>
  <treeselect
    :options="options"
    :value="value"
    :searchable="false"
    @input="updateValue"
    />
  <pre class="result">{{ value }}</pre>
</div>
JAVASCRIPT程式碼：

import Vue from 'vue'
import Vuex, { mapState, mapMutations } from 'vuex'
import { generateOptions } from './utils'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {
    value: 'a',
  },
  mutations: {
    updateValue(state, value) {
      state.value = value
    },
  },
})
 
export default {
  store,
 
  data: () => ({
    options: generateOptions(2),
  }),
 
  computed: {
    ...mapState([ 'value' ]),
  },
 
  methods: {
    ...mapMutations([ 'updateValue' ]),
  },
}

API
節點
node物件的可用屬性。

鍵    型別    描述
id（必填）    號碼| 串    用於標識樹中的選項。它的價值必須在所有選項中都是唯一的。
標籤（必填）    串    用於顯示選項。
孩子    node[] | null    宣告一個分支節點。您可以：
1）設定為由a組成的子選項陣列。葉節點，b。分支節點，或c。這兩者的混合物。或者
2）設定為空陣列，沒有子選項。或者
3）設定為null宣告一個解除安裝的分支節點以進行延遲載入。您可以稍後重新分配一個數組（無論它是否為空）loadOptions()來註冊這些子選項，並將此分支節點標記為已載入。
如果要宣告葉節點，請設定children: undefined或只是省略此屬性。
被禁用    布林    用於禁用專案選擇。有關詳細資訊，請參見此處
是新的    布林    用於為新節點提供不同的顏色。
isDefaultExpanded    布林    是否應預設擴充套件此資料夾選項。
的值label，children或isDisabled可以隨時重新分配。

新增比列出的屬性更多的屬性是可以的。您甚至可以通過訪問在自定義模板中使用這些額外的屬性node.raw.xxx。

道具
名稱    輸入/預設    描述
allowClearingDisabled    型別：布林
值預設值：false    即使存在禁用的選定節點，是否允許重置值。
allowSelectingDisabledDescendants    型別：布林
值預設值：false    選擇/取消選擇祖先節點時，是否應選擇/取消選擇其禁用的後代。您可能希望將此與allowClearingDisabledprop 結合使用。
alwaysOpen    型別：布林
值預設值：false    選單是否應始終開啟。
appendToBody    型別：布林
值預設值：false    將選單附加到<body />。
非同步    型別：布林
值預設值：false    是否啟用非同步搜尋模式。
自動對焦    型別：布林
值預設值：false    自動將元件聚焦在mount上。
autoLoadRootOptions    型別：布林
值預設值：true    在mount上自動載入root選項。設定false為時，將在開啟選單時載入根選項。
autoDeselectAncestors    型別：布林
值預設值：false    當用戶取消選擇節點時，會自動取消選擇其祖先。僅適用於平面模式。
autoDeselectDescendants    型別：布林
值預設值：false    當用戶取消選擇節點時，會自動取消選擇其後代。僅適用於平面模式。
autoSelectAncestors    型別：布林
值預設值：false    當用戶選擇節點時，自動選擇其祖先。僅適用於平面模式。
autoSelectDescendants    型別：布林
值預設值：false    當用戶選擇節點時，自動選擇其後代。僅適用於平面模式。
backspaceRemoves    型別：布林
值預設值：true    Backspace如果沒有文字輸入，是否刪除最後一項。
beforeClearAll    型別：Fn（）?（布林| Promise <布林>）
預設值：() => true    在清除所有輸入欄位之前處理的函式。返回false到被清除的停止值。
branchNodesFirst    型別：布林
值預設值：false    在葉節點之前顯示分支節點。
cacheOptions    型別：布林
值預設值：true    是否為非同步搜尋模式快取每個搜尋請求的結果。
可清除    型別：布林
值預設值：true    是否顯示重置值的“×”按鈕。
clearAllText    型別：字串
預設值："Clear all"    標題為“×”按鈕時:multiple="true"。
clearOnSelect    型別：Boolean 
預設值：預設為falsewhen :multiple="true"; 總是true否則。    選擇選項後是否清除搜尋輸入。僅在使用時使用:multiple="true"。對於單選模式，無論prop值如何，它總是在選擇後清除輸入。
clearValueText    型別：字串
預設值："Clear value"    “×”按鈕的標題。
closeOnSelect    型別：布林
值預設值：true    選擇選項後是否關閉選單。僅在使用時使用:multiple="true"。
defaultExpandLevel    型別：數字
預設值：0    載入時應自動擴充套件多少級別的分支節點。設定Infinity為預設情況下展開所有分支節點。
defaultOptions    型別：布林值| node[]
預設：false    使用者開始搜尋之前顯示的預設選項集。用於非同步搜尋模式。設定true為時，搜尋查詢作為空字串的結果將自動載入。
deleteRemoves    型別：布林
值預設值：true    Delete如果沒有文字輸入，是否刪除最後一項。
分隔符    型別：字串
預設值：","    用於連線隱藏欄位值的多個值的分隔符。
disableBranchNodes    型別：布林
值預設值：false    是否阻止選擇分支節點。見這裡的例子。
殘    型別：布林
值預設值：false    是否禁用控制元件。
disableFuzzyMatching    型別：布林
值預設值：false    設定為true禁用模糊匹配功能，預設情況下啟用此功能。
平面    型別：布林
值預設值：false    是否啟用平面模式。有關詳細資訊，請參見此處
例項Id    型別：字串| 號碼
預設值："<auto-incrementing number>$$"    將作為最後一個引數傳遞所有事件。用於識別事件來源。
joinValues    型別：布林
值預設值：false    使用delimiter（傳統模式）將多個值連線到單個表單欄位中。
限制    型別：數字
預設值：Infinity    限制所選選項的顯示。其餘的將隱藏在limitText字串中。
limitText    型別：Fn（count）?字串
預設值：count => `and ${count} more`    處理所選元素超出定義限制時顯示的訊息的函式。
裝載    型別：布林
值預設值：false    是否是外部載入選項。設定true為顯示微調器。
loadingText    型別：字串
預設值："Loading..."    載入選項時顯示的文字。
loadOptions    型別：FN（{ action，callback，parentNode?，instanceId}）?（void|服務承諾）
預設值：-    用於動態載入選項。有關詳細資訊，請參見此處 
可能的值action："LOAD_ROOT_OPTIONS"，"LOAD_CHILDREN_OPTIONS"或"ASYNC_SEARCH"。
callback- 一個接受可選error引數的函式
parentNode- 僅在載入子選項時顯示
searchQuery- 僅在搜尋非同步選項時顯示
instanceId- instanceIdeqauls為傳遞給vue-treeselect 的prop 的值
matchKeys    型別：String [] 
預設值：[ "label" ]    node要過濾的物件的哪些鍵。
最大高度    型別：數字
預設值：300    設定maxHeight選單的樣式值。
多    型別：布林
值預設值：false    設定true為允許選擇多個選項（也稱為多選模式）。
名稱    型別：字串
預設值：-    <input />為html表單生成帶有此欄位名稱的隱藏標記。
noChildrenText    型別：字串
預設值："No sub-options."    分支節點沒有子節點時顯示的文字。
noOptionsText    型別：字串
預設值："No options available."    沒有可用選項時顯示的文字。
noResultsText    型別：字串
預設值："No results found..."    沒有匹配的搜尋結果時顯示的文字。
正規化    型別：Fn（node，instanceId）? node
預設值：node => node    用於規範化源資料。有關詳細資訊，請參見此處
openDirection    型別：字串
預設值："auto"    預設情況下（"auto"），選單將在控制元件下方開啟。如果空間不足，vue-treeselect將自動翻轉選單。您可以使用其他四個選項之一強制選單始終開啟到指定的方向。
可接受的值："auto"，"below"，"bottom"，"above"或"top"。
openOnClick    型別：布林
值預設值：true    是否在單擊控制元件時自動開啟選單。
openOnFocus    型別：布林
值預設值：false    是否在控制元件聚焦時自動開啟選單。
選項    型別：預設：-node[]    一系列可用選項。請參閱此處以瞭解如何定義它們。
佔位符    型別：字串
預設值："Select..."    欄位佔位符，在沒有值時顯示。
需要    型別：布林
值預設值：false    required需要時應用HTML5 屬性。
retryText    型別：字串
預設值："Retry?"    顯示的文字詢問使用者是否重試載入子選項。
retryTitle    型別：字串
預設值："Click to retry"    重試按鈕的標題。
搜尋    型別：布林
值預設值：true    是否啟用搜索功能。
searchNested    型別：布林
值預設值：false    設定true是否搜尋查詢也應搜尋所有祖先節點。見這裡的例子。
searchPromptText    型別：字串
預設值："Type to search..."    文字提示以提示非同步搜尋。用於非同步搜尋模式。
showCount    型別：布林
值預設值：false    是否在每個分支節點的標籤旁邊顯示子項。見這裡的例子。
showCountOf    型別：字串
預設值："ALL_CHILDREN"    與結合使用showCount以指定應顯示哪種型別的計數。
可接受的值："ALL_CHILDREN"，"ALL_DESCENDANTS"，"LEAF_CHILDREN"或"LEAF_DESCENDANTS"。
showCountOnSearch    型別：布林
值預設值：-    是否在搜尋時向孩子們展示。回退到showCount未指定時的值。
sortValueBy    型別：字串
預設值："ORDER_SELECTED"    選擇的選項應以哪種順序顯示在觸發器中並按value陣列排序。僅在使用時使用:multiple="true"。見這裡的例子。
可接受的值："ORDER_SELECTED"，"LEVEL"或"INDEX"。
的tabIndex    型別：數字
預設值：0    控制元件的Tab索引。
值    輸入：id| node| id[]| node[]
預設值：-    控制元件的值。
應當id或node物件何時:multiple="false"，或者陣列id或node物件何時:multiple="true"。它的格式取決於valueFormat道具。
對於大多數情況，只需使用v-model。
valueConsistsOf    型別：字串
預設值："BRANCH_PRIORITY"    value在多選模式下，陣列中應包含哪種節點。見這裡的例子。
可接受的值："ALL"，"BRANCH_PRIORITY"，"LEAF_PRIORITY"或"ALL_WITH_INDETERMINATE"。
valueFormat    型別：字串
預設值："id"    value道具的格式。
請注意，設定為時，每個物件中"object"只需要id＆label屬性。可接受的值：或。nodevalue
"id""object"
用zIndex    型別：數字| String 
預設值：999    z-index 的選單。
活動
名稱    屬性    描述
開啟    （instanceId）    選單開啟時發出。
關    （value，instanceId）    選單關閉時發出。
輸入    （value，instanceId）    價值變動後釋出。
選擇    （node，instanceId）    選擇選項後發出。
取消    （node，instanceId）    取消選擇選項後發出。
搜尋的變化    （searchQuery，instanceId）    搜尋查詢更改後發出。


名稱    道具    描述
選項標籤    { node，shouldShowCount，count，labelClassName，countClassName}    自定義選項標籤模板的插槽。有關詳細資訊，請參見此處
值標籤    { node}    自定義價值標籤模板的插槽。有關詳細資訊，請參見此處
詳情請參考：Vue-Treeselect
————————————————
版權宣告：本文為CSDN博主「Dream_xun」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/Dream_xun/article/details/83116804