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]
}
},
},
}
五、延遲加載示例
如果您有大量深層嵌套選項，則可能需要在初始加載時僅加載最高級別的選項，並僅在需要時加載其余選項。您可以通過以下步驟實現這一目標：
- 通過設置聲明一個卸載的分支節點
children: null - 添加
loadOptions道具 - 每當卸載的分支節點被擴展時，
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的默認非平面模式，這意味着：
- 每當檢查分支節點時，也會檢查其所有子節點
- 每當分支節點檢查所有子節點時，也將檢查分支節點本身
有時我們不需要該機制，並且希望分支節點和葉節點不會相互影響。在這種情況下，應使用平面模式，如下所示。
如果要控制顯示所選選項的順序，請使用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} |
自定義價值標簽模板的插槽。有關詳細信息，請參見此處 |