vue-Treeselect

一、Node

Key	Type	Description
id (required)	Number | String	用于标识树中的选项。其值在所有选项中必须是唯一的
label (required)	String	用于显示选项
children	node[] | null	声明一个分支节点。你可以： 1） 设置为由a组成的子选项数组。叶节点，b。分支节点或c。这两者的混合。或 2） 设置为空数组以获得无子项选项。或 3） 设置为null以声明一个已卸载的分支节点用于延迟加载。您可以稍后在loadOptions（）中重新分配一个数组（无论它是否为空）来注册这些子选项，并将此分支节点标记为已加载。 如果要声明一个叶子节点，请设置children：undefined或简单地省略此属性。
isDisabled	Boolean	用于禁用项目选择
isNew	Boolean	用于为新节点赋予不同的颜色。
isDefaultExpanded	Boolean	默认情况下是否应展开此文件夹选项。

 

二、Events

Name	Attributes	Description
open	(instanceId)	菜单打开时触发。
close	(value, instanceId)	菜单关闭时触发。
input	(value, instanceId)	值更改后发出。
select	(node, instanceId)	选择选项后触发。
deselect	(node, instanceId)	取消选择选项后触发。
search-change	(searchQuery, instanceId)	在搜索查询更改后。

三、Slots

Name	Props	Description
option-label	{node, shouldShowCount, count, labelClassName, countClassName}	自定义选项标签模板的插槽。
value-label	{node}	自定义值标签模板的插槽
before-list	-	插槽显示在菜单列表之前。
after-list	-	插槽显示在菜单列表之后。

四、Props

属性	类型	默认值	用途
allowClearingDisabled	Boolean	false	是否允许重置值，即使有禁用的选定节点
allowSelectingDisabledDescendants	Boolean	false	当选择/取消选择祖先节点时，是否应选择/取消选中其禁用的后代 可与allowClearingDisabled道具结合使用。
alwaysOpen	Boolean	false	菜单是否应该始终打开
appendToBody	Boolean	false	将菜单附加到<body/>
async	Boolean	false	是否启用异步搜索模式
autoFocus	Boolean	false	自动将组件聚焦到装载上
autoLoadRootOptions	Boolean	false	在装载时自动加载根选项。当设置为false时，打开菜单时将加载根选项。
autoDeselectAncestors	Boolean	false	当用户取消选择节点时，会自动取消选择其祖先。仅适用于平面模式
autoDeselectDescendants	Boolean	false	当用户取消选择节点时，会自动取消选择其子代。仅适用于平面模式
autoSelectAncestors	Boolean	false	当用户选择一个节点时，会自动选择其祖先。仅适用于平面模式
autoSelectDescendants	Boolean	false	当用户选择一个节点时，会自动选择其子节点。仅适用于平面模式
backspaceRemoves	Boolean	true	如果没有文本输入，Backspace是否会删除最后一项
beforeClearAll	Fn() 🡒 (Boolean | Promise<Boolean>)	() => true	在清除所有输入字段之前进行处理的函数。返回false以停止清除值
branchNodesFirst	Boolean	false	在叶节点之前显示分支节点
cacheOptions	Boolean	true	是否缓存异步搜索模式下每个搜索请求的结果
clearable	Boolean	true	是否显示重置值的“×”按钮
clearAllText	String	"Clear all"	当：multiple=“true”时，“×”按钮的标题
clearOnSelect	Boolean	Defaults to false when :multiple="true"; always true otherwise.	选择选项后是否清除搜索输入。仅在以下情况下使用：multiple=“true”。对于单选模式，无论道具值如何，它总是在选择后清除输入
clearValueText	String	"Clear value"	“×”按钮的标题
closeOnSelect	Boolean	true	选择选项后是否关闭菜单。仅在以下情况下使用：multiple=“true”
defaultExpandLevel	Number	0	加载时应自动扩展多少级分支节点。设置“无限”使所有分支节点默认展开
defaultOptions	Boolean | node[]	false	在用户开始搜索之前显示的默认选项集。用于异步搜索模式。当设置为true时，搜索查询的结果将作为空字符串自动加载
deleteRemoves	Boolean	true	如果没有文本输入，删除是否会删除最后一项
delimiter	String	","	用于连接隐藏字段值的多个值的分隔符
disableBranchNodes	Boolean	false	只能选择末级节点
disabled	Boolean	false	是否禁用控件
disableFuzzyMatching	Boolean	false	设置为true可禁用默认启用的模糊匹配功能
flat	Boolean	false	是否启用平面模式
flattenSearchResults	Boolean	false	是否在搜索时展平树（仅同步搜索模式）
instanceId	String | Number	"<auto-incrementing number>$$"	将所有事件作为最后一个参数传递。可用于识别事件来源
joinValues	Boolean	false	使用分隔符将多个值连接到一个表单字段中（传统模式）
limit	Number	Infinity	限制所选选项的显示。其余部分将隐藏在limitText字符串中
limitText	Fn(count) 🡒 String	count => `and ${count} more`	处理所选元素超过定义限制时显示的消息的函数
loadingText	String	"Loading..."	加载选项时显示的文本
loadOptions	Fn({action, callback, parentNode?, instanceId}) 🡒 (void | Promise)	-	用于动态加载选项。请参阅此处了解详细信息。 可能的操作值：“LOAD_ROOT_OPTIONS”、“LOAD_CHILDREN_OPTIONS“或“ASYNC_SEARCH”。 callback-一个接受可选错误参数的函数 parentNode-仅在加载子选项时显示 searchQuery-仅在搜索异步选项时显示 instanceId-等于您传递给vue-treeselect的instanceId属性的值
matchKeys	String[]	[ "label" ]	要过滤节点对象的哪些键
maxHeight	Number	300	设置菜单的maxHeight样式值
multiple	Boolean	false	设置为true以允许选择多个选项（即多选模式）
name	String	-	为html表单生成一个带有此字段名的隐藏<input/>标签
noChildrenText	String	"No sub-options."	分支节点没有子节点时显示的文本
noOptionsText	String	"No options available."	没有可用选项时显示的文本
noResultsText	String	"No results found..."	当没有匹配的搜索结果时显示的文本
normalizer	Fn(node, instanceId) 🡒 node	node => node	于规范化源数据
openDirection	String	"auto"	默认情况下（“自动”），菜单将在控件下方打开。如果没有足够的空间，vue-treeselect将自动翻转菜单。您可以使用其他四个选项之一强制菜单始终向指定方向打开。 可接受值："auto", "below", "bottom", "above" or "top"
openOnClick	Boolean	true	单击控件时是否自动打开菜单
openOnFocus	Boolean	false	控件聚焦时是否自动打开菜单
options	node[]	-	可用选项数组
placeholder	String	"Select..."	字段占位符，当没有值时显示
required	Boolean	false	需要时应用HTML5必需属性
retryText	String	"Retry?"	显示的文本询问用户是否重试加载子选项。
retryTitle	String	"Click to retry"	重试按钮的标题。
searchable	Boolean	true	是否启用搜索功能
searchNested	Boolean	false	如果搜索查询也应在所有祖先节点中搜索，则设置为true。
searchPromptText			提示异步搜索的文本提示。用于异步搜索模式。
showCount	Boolean	false	是否在每个分支节点的标签旁边显示子计数。
showCountOf	Boolean	-	与showCount结合使用，指定应显示哪种类型的计数。 可接受值：“ALL_CHILDREN”、“ALL_DESENDANTS”、“LEAF_CHILDREN”或“LEAF_DESCENDANTS”。
showCountOnSearch			搜索时是否显示子节点数。未指定时回退到showCount的值。
sortValueBy	String	"ORDER_SELECTED"	所选选项应按何种顺序显示在触发器中并按值数组排序。仅在以下情况下使用：multiple=“true”。例如，请参见此处。 可接受的值：“ORDER_SELECTED”、“LEVEL”或“INDEX”。
tabIndex	Number	0	控件的选项卡索引。
value	id | node | id[] | node[]	-	控制的价值。 当：multiple=“false”时，应为id或节点对象，当：multiply=“true”时，则应为id数组或节点对象。其格式取决于valueFormat属性。 在大多数情况下，只需使用v-model即可。
valueConsistsOf	String	"BRANCH_PRIORITY"	在多选模式下，值数组中应包含哪种节点。 可接受值："ALL", "BRANCH_PRIORITY", "LEAF_PRIORITY" or "ALL_WITH_INDETERMINATE"
valueFormat	String	"id"	值道具的格式。 请注意，当设置为“object”时，值中的每个节点对象只需要id和标签属性。 可接受的值：“id”或“object”。
zIndex	Number | String	999	菜单的z-index