Vue.js學習（八）—— 樹形結構下拉框元件vue-treeselect

滄海一粟hr發表於2020-09-03
Vue.js元件

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

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

需要Vue 2.2+

 

一、基本使用流程

1、首先npm'安裝依賴

npm install @riophae/vue-treeselect --save

2、然後在需要使用的元件中引入

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3、宣告元件

components: { Treeselect }

4、使用

 <treeselect
    :options="dataList"     //接受陣列
    placeholder="請選擇上級選單"
    v-model="form.parentId"
/>

 

二、樹結構下拉框示例

　　

<treeselect
    :options="optionsMechanism"
    placeholder="select...."
    v-model="value"/>
data(){
    return{
       value:null,
       optionsMechanism:[{
          id: 'fruits',
          label: 'Fruits',
          children: [ {
            id: '432673427163429080',
            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 ?',
          } ],
      }],
    }
}

　　效果圖如下：

幾個常用的屬性：
1、禁用控制元件：在標籤加disabled屬性為true
2、多選控制元件：在標籤加multiple屬性為true
3、禁用分支：在樹結構資料中與label平級的地方新增isDisabled:true

 

三、模糊匹配功能示例

<div>
  <treeselect
    :multiple="true"
    :options="options"
    placeholder="Select your favourite(s)..."
    v-model="value"
    />
  <pre class="result">{{ value }}</pre>
</div>
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 ?',
      } ],
    } ],
  }),
}

 

四、單選和多選示例

<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>
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]
      }
    },
  },
}

 

五、延遲載入示例

　　如果您有大量深層巢狀選項，則可能需要在初始載入時僅載入最高階別的選項，並僅在需要時載入其餘選項。您可以通過以下步驟實現這一目標：

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

<treeselect
  :multiple="true"
  :options="options"
  :load-options="loadOptions"
  placeholder="Try expanding any folder option..."
  v-model="value"
  />
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，並且在開啟選單時將載入根選項。

<treeselect
  :load-options="loadOptions"
  :options="options"
  :auto-load-root-options="false"
  :multiple="true"
  placeholder="Open the menu..."
  />
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請求的結果，因此使用者可以等待更少。

<treeselect
  :multiple="true"
  :async="true"
  :load-options="loadOptions"
  />
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的預設非平面模式，這意味著：

  1. 每當檢查分支節點時，也會檢查其所有子節點
  2. 每當分支節點檢查所有子節點時，也將檢查分支節點本身

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

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

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

<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>
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陣列中，加上不確定的節點

<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>
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任何葉節點或分支節點來禁用專案選擇。對於非平面模式，在分支節點上設定也將禁用其所有後代。

<treeselect
  :multiple="true"
  :options="options"
  :value="value"
  />
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”。您也可以嘗試搜尋“沙拉”來感受差異。

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

<treeselect
  :multiple="true"
  :options="options"
  :disable-branch-nodes="true"
  v-model="value"
  search-nested
  />
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類名

<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>
import { generateOptions } from './utils'
 
export default {
  data: () => ({
    value: null,
    options: generateOptions(2),
  }),
}

 

十一、自定義值標籤示例

　　您可以自定義有價物品的標籤（多項選擇時的每個專案）。vue-treeselect利用了Vue的作用域插槽功能，並提供了一些你應該在自定義模板中使用的道具：

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

<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>
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狀態每當值改變。

<div>
  <treeselect
    :options="options"
    :value="value"
    :searchable="false"
    @input="updateValue"
    />
  <pre class="result">{{ value }}</pre>
</div>
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

1、節點

　　node物件的可用屬性。

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

　　的值label，children或isDisabled可以隨時重新分配。

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

 2、道具

名稱輸入/預設描述
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 的選單。

3、活動

名稱屬性描述
開啟 （instanceId） 選單開啟時發出。
關 （value，instanceId） 選單關閉時發出。
輸入 （value，instanceId） 價值變動後釋出。
選擇 （node，instanceId） 選擇選項後發出。
取消 （node，instanceId） 取消選擇選項後發出。
搜尋的變化 （searchQuery，instanceId） 搜尋查詢更改後發出。

4、老虎

名稱道具描述
選項標籤 { node，shouldShowCount，count，labelClassName，countClassName} 自定義選項標籤模板的插槽。有關詳細資訊，請參見此處
值標籤 { node} 自定義價值標籤模板的插槽。有關詳細資訊，請參見此處

 

相關文章