Tree

Brief Introduction

The Tree component is used to display hierarchical data structures, supporting expand/collapse, selection, checkbox, and other features. It can be used for organizational charts, file directories, categories, and similar scenarios.

Basic Usage

Basic tree structure display with node click event support.

Basic Usage

Root Node 1

Root Node 2

<template>
  <MYTree
    :data='treeData'
    :props='{ label: 'name', children: 'children' }'
    @node-click='handleNodeClick' />
</template>
<script setup>
const treeData = [
  {
    id: 1,
    name: 'Root Node 1',
    children: [
      { id: 2, name: 'Child Node 1-1' },
      {
        id: 3,
        name: 'Child Node 1-2',
        children: [
          { id: 4, name: 'Grandchild Node 1' },
          { id: 5, name: 'Grandchild Node 2' }
        ]
      }
    ]
  },
  {
    id: 6,
    name: 'Root Node 2',
    children: [
      { id: 7, name: 'Child Node 2-1' }
    ]
  }
]
const handleNodeClick = (node) => {
  console.log('Node clicked:', node)
}
</script>

展开代码

Tree Selector

Tree selector supports single selection, multiple selection, filtering, and other features.

Single Selection Mode

Single Selection Mode

Please select▼

Root Node 1

Root Node 2

<template>
  <MYTreeSelect 
    v-model='selectedValue'
    :data='treeData'
    :props='{ label: 'name', value: 'id', children: 'children' }'
    placeholder='Please select'
    clearable />
</template>
<script setup>
import { ref } from 'vue'
const selectedValue = ref(null)
const treeData = [
  {
    id: 1,
    name: 'Root Node 1',
    children: [
      { id: 2, name: 'Child Node 1-1' },
      {
        id: 3,
        name: 'Child Node 1-2',
        children: [
          { id: 4, name: 'Grandchild Node 1' },
          { id: 5, name: 'Grandchild Node 2' }
        ]
      }
    ]
  },
  {
    id: 6,
    name: 'Root Node 2',
    children: [
      { id: 7, name: 'Child Node 2-1' }
    ]
  }
]
</script>

展开代码

Multiple Selection Mode

Multiple Selection Mode

Please select▼

Root Node 1

<template>
  <MYTreeSelect
    v-model='selectedValues'
    :data='treeData'
    :props='{ label: 'name', value: 'id', children: 'children' }'
    multiple
    placeholder='Please select'
    clearable />
</template>
<script setup>
import { ref } from 'vue'
const selectedValues = ref([])
const treeData = [
  {
    id: 1,
    name: 'Root Node 1',
    children: [
      { id: 2, name: 'Child Node 1-1' },
      {
        id: 3,
        name: 'Child Node 1-2',
        children: [
          { id: 4, name: 'Grandchild Node 1' },
          { id: 5, name: 'Grandchild Node 2' }
        ]
      }
    ]
  }
]
</script>

展开代码

Checkbox Mode

Supports checkbox selection with parent-child linkage options.

Checkbox Mode

Please select▼

Root Node 1

<template>
  <MYTreeSelect 
    v-model='checkedValues'
    :data='treeData'
    :props='{ label: 'name', value: 'id', children: 'children' }'
    multiple
    show-checkbox
    :check-strictly='false'
    placeholder='Please select' />
</template>
<script setup>
import { ref } from 'vue'
const checkedValues = ref([2, 4])
const treeData = [
  {
    id: 1,
    name: 'Root Node 1',
    children: [
      { id: 2, name: 'Child Node 1-1' },
      {
        id: 3,
        name: 'Child Node 1-2',
        children: [
          { id: 4, name: 'Grandchild Node 1' },
          { id: 5, name: 'Grandchild Node 2' }
        ]
      }
    ]
  }
]
</script>

展开代码

Filtering

Supports input filtering for quick node lookup.

Filtering

Enter keyword▼

Root Node 1

<template>
  <MYTreeSelect 
    v-model='filteredValue'
    :data='treeData'
    :props='{ label: 'name', value: 'id', children: 'children' }'
    filterable
    placeholder='Enter keyword' />
</template>
<script setup>
import { ref } from 'vue'
const filteredValue = ref(null)
const treeData = [
  {
    id: 1,
    name: 'Root Node 1',
    children: [
      { id: 2, name: 'Child Node 1-1' },
      {
        id: 3,
        name: 'Child Node 1-2',
        children: [
          { id: 4, name: 'Grandchild Node 1' },
          { id: 5, name: 'Grandchild Node 2' }
        ]
      }
    ]
  }
]
</script>

展开代码

Custom Styling

Supports custom text color, background color, and active color.

Custom Styling

请选择▼

Root Node 1

<template>
  <MYTreeSelect 
    v-model='styledValue'
    :data='treeData'
    :props='{ label: 'name', value: 'id', children: 'children' }'
    background-color='#2d2d2d'
    text-color='#eaeaea'
    active-color='#409eff'
    style='width: 240px' />
</template>
<script setup>
import { ref } from 'vue'
const styledValue = ref(null)
const treeData = [
  {
    id: 1,
    name: 'Root Node 1',
    children: [
      { id: 2, name: 'Child Node 1-1' },
      {
        id: 3,
        name: 'Child Node 1-2',
        children: [
          { id: 4, name: 'Grandchild Node 1' },
          { id: 5, name: 'Grandchild Node 2' }
        ]
      }
    ]
  }
]
</script>

展开代码

API Reference

Tree Props

Prop	Description	Type	Options	Default
data	Tree data	array	—	[]
props	Configuration options	object	—	{}
default-expanded	Whether to expand all nodes by default	boolean	—	false
default-expanded-keys	Array of keys for default expanded nodes	array	—	[]

Tree Events

Event Name	Description	Parameters
node-click	Triggered when a node is clicked	Clicked node data

TreeSelect Props

Prop	Description	Type	Options	Default
modelValue / v-model	Bound value	string / number / array	—	null
data	Tree data	array	—	[]
props	Configuration options	object	—	{}
multiple	Whether to support multiple selection	boolean	—	false
filterable	Whether to support filtering	boolean	—	false
placeholder	Placeholder text	string	—	Please select
defaultExpanded	Whether to expand all nodes by default	boolean	—	false
size	Size	string	default / small / large	default
disabled	Whether to disable	boolean	—	false
clearable	Whether to be clearable	boolean	—	false
loading	Whether to show loading state	boolean	—	false
popperClass	Custom class name for dropdown	string	—	''
class	Custom class name	string	—	''
style	Custom styles	string / object	—	''
defaultExpandedKeys	Array of keys for default expanded nodes	array	—	[]
showCheckbox	Whether nodes can be checked	boolean	—	false
checkStrictly	Whether checkbox is strict mode (parent-child not linked)	boolean	—	false
defaultCheckedKeys	Array of keys for default checked nodes	array	—	[]
textColor	Text color	string	—	#606266
backgroundColor	Background color	string	—	#fff
activeColor	Active color	string	—	#409eff
width	Width	string / number	—	100%
height	Height	string / number	—	auto
inputHeight	Input box height	string / number	—	32px
validateEvent	Whether to trigger form validation	boolean	—	true
showArrow	Whether to show arrow	boolean	—	true
arrowType	Arrow type	string	—	arrow
arrowColor	Arrow color	string	—	#909399

TreeSelect Events

Event Name	Description	Parameters
update:modelValue	Triggered when value changes	New value
change	Triggered when value changes	New value
clear	Triggered on clear	—
check-change	Triggered when node checkbox state changes

Tree Props Configuration

Prop	Description	Type	Default
label	Property name for node label	string	'label'
children	Property name for node children	string	'children'
value	Property name for node value	string	'id'