el-tree-v2

Virtualized Tree (TreeV2) Component

TreeV2 provides a virtualized tree for rendering large hierarchical datasets efficiently.

When to Use

• Large tree structures (1000+ nodes)
• Performance-critical tree views
• Virtual scrolling needed
• File system browsers

Basic Usage

<template>
  <el-tree-v2 :data="data" :props="defaultProps" :height="200" />
</template>

<script setup>
const defaultProps = {
  value: 'id',
  label: 'label',
  children: 'children'
}

const data = [
  {
    id: '1',
    label: 'Level 1',
    children: [
      { id: '1-1', label: 'Level 1-1' }
    ]
  }
]
</script>

Selectable

<template>
  <el-tree-v2
    :data="data"
    :props="defaultProps"
    :height="200"
    show-checkbox
  />
</template>

Default State

<template>
  <el-tree-v2
    :data="data"
    :props="defaultProps"
    :height="200"
    :default-expanded-keys="['1']"
    :default-checked-keys="['1-1']"
    show-checkbox
  />
</template>

Custom Node Content

<template>
  <el-tree-v2 :data="data" :props="defaultProps" :height="200">
    <template #default="{ node, data }">
      <span>{{ node.label }} - Custom</span>
    </template>
  </el-tree-v2>
</template>

Filtering

<template>
  <el-input v-model="filterText" placeholder="Filter" />
  <el-tree-v2
    ref="treeRef"
    :data="data"
    :props="defaultProps"
    :height="200"
    :filter-method="filterMethod"
  />
</template>

<script setup>
import { ref, watch } from 'vue'

const filterText = ref('')
const treeRef = ref()

const filterMethod = (query, data, node) => {
  if (!query) return true
  return data.label.includes(query)
}

watch(filterText, (val) => {
  treeRef.value.filter(val)
})
</script>

API Reference

TreeV2 Attributes

Name	Description	Type	Default
data	Tree data	Array<{[key: string]: any}>	—
empty-text	Text when data is empty	string	—
props	Configuration options	object	—
highlight-current	Highlight current node	boolean	false
expand-on-click-node	Expand on node click	boolean	true
check-on-click-node	Check on node click	boolean	false
check-on-click-leaf	Check on leaf node click	boolean	true
default-expanded-keys	Initially expanded keys	string[] | number[]	—
show-checkbox	Show checkboxes	boolean	false
check-strictly	Parent-child independent	boolean	false
default-checked-keys	Initially checked keys	string[] | number[]	—
current-node-key	Current node key	string | number	—
filter-method	Filter method	(query, data, node) => boolean	—
indent	Indentation (px)	number	16
icon	Custom icon	string | Component	—
item-size	Node height	number	26
scrollbar-always-on	Always show scrollbar	boolean	false
height	Tree height	number	200