استفاده اولیه

The TreeSelect component is used to render a data treeview. It provides a simple way to select a node in a tree.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.0
    • Item 3.1
      • Item 3.1.1
      • Item 3.1.2
        • empty
      • Item 3.1.3
    • Item 3.2
    • Item 3.3
  • Item 4
نمایش کد
vue

Model usage

The TreeSelect items can be made selectable. Use the v-model directive to enable item selection.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.0
    • Item 3.1
      • Item 3.1.1
      • Item 3.1.2
        • empty
      • Item 3.1.3
    • Item 3.2
    • Item 3.3
  • Item 4
نمایش کد
vue

Async data

The TreeSelect can be used to display data from an async source. Take a look at the code example for more details about usage.

  • pending...
نمایش کد
vue

Change default icons

TreeSelect icons can be changed. Use the icon prop to change the icons of the TreeSelect items. Check out this example of a folder tree.

  • .app
  • src
  • app.config.ts
  • tailwind.config.cjs
نمایش کد
vue

Exposed methods

The TreeSelect component exposes some methods that can be used to interact with the component. Check out this example to see how to use them.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.0
    • Item 3.1
      • Item 3.1.1
      • Item 3.1.2
        • empty
      • Item 3.1.3
    • Item 3.2
    • Item 3.3
  • Item 4
نمایش کد
vue

#<BaseTreeSelect>

•Model

v-model
نمایش مثال
vue

•خصوصیات

children
The tree items
نمایش مثال
vue
classes
Optional CSS classes to apply to the wrapper, label, and input elements.
نمایش مثال
vue
i18n
Translation strings.
نمایش مثال
vue
icons
Custom icons to use for the component.
نمایش مثال
vue
level

@internal

نمایش مثال
vue
parent

@internal

نمایش مثال
vue
treeline
Display a line between items of the same level.
نمایش مثال
vue

•Slots

#pending
نمایش مثال
vue
#pending-icon
نمایش مثال
vue
#pending-label
نمایش مثال
vue
#empty
نمایش مثال
vue
#empty-icon
نمایش مثال
vue
#empty-label
نمایش مثال
vue
#item
نمایش مثال
vue
#item-icon
نمایش مثال
vue
#item-select
نمایش مثال
vue
#item-label
نمایش مثال
vue
#children
نمایش مثال
vue

•Exposed

tree
The loaded tree items from the `children` prop.
نمایش مثال
vue
loadTree
Force the component to load the tree from the `children` prop.
نمایش مثال
vue
getChildren
Returns all nodes from a tree source
نمایش مثال
vue
getNodeChildren
Returns the children from a node.
نمایش مثال
vue
areAllChildSelected
Check if all sub-nodes are selected from a node.
نمایش مثال
vue
areSomeChildSelected
Check if some sub-nodes are selected from a node.
نمایش مثال
vue
selectAllNode
Select all sub-nodes from a node.
نمایش مثال
vue
unselectAllNode
Unselect all leaf nodes from a node.
نمایش مثال
vue
isUndeterminate
Is a node in undeterminate state. (some children are selected / children not loaded)
نمایش مثال
vue
isNodeLoaded
Is a node loaded.
نمایش مثال
vue
toggleNodeSelection
Invert the selection state from a node.
نمایش مثال
vue
toggleChildrenSelection
Invert the selection state.
نمایش مثال
vue
selectAllChildren
Select all nodes.
نمایش مثال
vue
unselectAllChildren
Unselect all nodes.
نمایش مثال
vue

Custom item with icon

TreeSelect items can be customized to show a specific icon. Take a look at this example to see how to use them.

نمایش کد
vue

Custom item with media

TreeSelect items can be customized to show images. Take a look at this example to see how to use them.

نمایش کد
vue

#<BaseTreeSelectItem>

•خصوصیات

level
The level in the tree of the item.
نمایش مثال
vue
toggle
Action triggered when the item is clicked.
نمایش مثال
vue
value
The items to display in the component.
نمایش مثال
vue

•خصوصیات (با app.config)

rounded
The radius of the component.

@since

2.0.0

نمایش مثال
vue

•Slots

#default
This slot has no inherted props
نمایش مثال
vue
#item-icon
This slot has no inherted props
نمایش مثال
vue

•Exposed

rounded
The radius of the component.
نمایش مثال
vue