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 |