VTreeview API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| activatable | ||
| Allows user to mark a node as active by clicking on it. | ||
| activated | ||
| Array of ids of activated nodes. | ||
| active-class | ||
| The class applied to the component when it is in an active state. | ||
| active-color | ||
| The applied color when the component is in an active state. | ||
| active-strategy | ||
| Affects how items with children behave when activated. leaf: Only leaf nodes (items without children) can be activated. independent: All nodes can be activated whether they have children or not. classic: Activating a parent node will cause all children to be activated. | ||
| base-color | ||
| Sets the color of component when not focused. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| collapse-icon | ||
| MISSING DESCRIPTION | ||
| color | ||
| Applies specified color to the active node - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| custom-filter | ||
| Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted. | ||
| custom-key-filter | ||
| Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| disabled | ||
| Disables selection for all nodes. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| expand-icon | ||
| Icon used to indicate that a node can be expanded. | ||
| filter-keys | ||
| Array of specific keys to filter on the item. | ||
| filter-mode | ||
| Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. some: There is at least one match from either the custom filter or the custom key filter. every: All columns match either the custom filter or the custom key filter. union: There is at least one match from the custom filter, or all columns match the custom key filters. intersection: There is at least one match from the custom filter, and all columns match the custom key filters. | ||
| height | ||
| Sets the height for the component. | ||
| item-children | ||
| Property on supplied items that contains its children. | ||
| item-props | ||
| Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component. | ||
| item-title | ||
| Property on supplied items that contains its title. | ||
| item-type | ||
| Designates the key on the supplied items that is used for determining the nodes type. | ||
| item-value | ||
| Property on supplied items that contains its value. | ||
| items | ||
| An array of items used to build the treeview. | ||
| lines | ||
| Designates a minimum-height for all children v-list-item components. This prop uses line-clamp and is not supported in all browsers. | ||
| load-children | ||
| A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a item-children property that is an empty array. Supports returning a Promise. | ||
| loading-icon | ||
| Icon used when node is in a loading state. | ||
| mandatory | ||
| Forces at least one item to always be selected (if available). | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| no-filter | ||
| Disables all item filtering. | ||
| open-all | ||
| When true will cause all branch nodes to be opened when component is mounted. | ||
| open-strategy | ||
| Affects how items with children behave when expanded. multiple: Any number of groups can be open at once. single: Only one group at each level can be open, opening a group will cause others to close. list: Multiple, but all other groups will close when an item is selected. | ||
| opened | ||
| An array containing the values of currently opened groups. Can be two-way bound with v-model:opened. | ||
| return-object | ||
| When true will make v-model, active.sync and open.sync return the complete object instead of just the key. | ||
| rounded | ||
| Provides an alternative active style for v-treeview node. Only visible when activatable is true and should not be used in conjunction with the shaped prop. | ||
| search | ||
| The search model for filtering results. | ||
| select-strategy | ||
| Affects how items with children behave when selected. leaf: Only leaf nodes (items without children) can be selected. independent: All nodes can be selected whether they have children or not. classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model. | ||
| selectable | ||
| Will render a checkbox next to each node allowing them to be selected. | ||
| selected | ||
| An array containing the values of currently selected items. Can be two-way bound with v-model:selected. | ||
| slim | ||
| Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| value-comparator | ||
| Apply a custom comparison algorithm to compare model-value and values contains in the items prop. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| click:open | |
| Emits the item when it is clicked to open. | |
| click:select | |
| Emits the item when it is clicked to select. | |
| update:activated | |
| Emits the array of active items when this value changes. | |
| update:opened | |
| Emits the array of open items when this value changes. | |
| update:selected | |
| Emits the array of selected items when this value changes. | |
插槽
| append |
| Appends content after label. |
| default |
| The default Vue slot. |
| divider |
| Slot for custom divider. |
| header |
| Slot for custom header. |
| item |
| Define a custom item appearance. |
| prepend |
| Prepends content before label. |
| subheader |
| Slot for custom subheader. |
| subtitle |
| Slot for the component’s subtitle content. |
| title |
| Slot for the component’s title content. |
可用属性
| open |
| Open a node by id |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $treeview-label-font-size | |
| $treeview-node-height | |
| $treeview-node-height-dense | |
| $treeview-node-level-width | |
| $treeview-node-margin | |
| $treeview-node-padding | |
| $treeview-node-shaped-margin | |
| $treeview-transition | |