Virtualized Tree 虚拟化树形控件 ​

不论你的数据量多大，虚拟树都能毫无压力地处理。

ts
import { createApp } from 'vue'
import { TreeV2 as ElTreeV2 } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTreeV2)

基础用法 ​

基础的树形结构展示。

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

<script lang="ts" setup>
import { TreeV2 as ElTreeV2 } from '@szhn/dh-design-pc'


const defaultProps = {
  value: 'id',
  label: 'label',
  children: 'children',
}

interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const dataSource = (
  count = 1000,
  maxDeep = 3,
  maxChildren = 10,
): Tree[] => {
  let id = 0
  const hasChildren = (deep: number) =>
    deep < maxDeep && Math.random() > 0.5
  const genChildren = (deep: number): Tree[] | undefined => {
    if (!hasChildren(deep)) return undefined
    const len = Math.floor(Math.random() * maxChildren) + 1
    return Array.from({ length: len }).map(() => {
      id += 1
      return {
        id,
        label: `node-${id}`,
        children: genChildren(deep + 1),
      }
    })
  }
  return Array.from({ length: count }).map(() => {
    id += 1
    return {
      id,
      label: `node-${id}`,
      children: genChildren(1),
    }
  })
}

const data = dataSource()
</script>

可选择的虚拟树 ​

适用于需要选择层级时使用。

WARNING

在使用 show-checkbox 时，因为 check-on-click-leaf 默认值为 true，最后一个树节点可以通过点击节点进行勾选。

<template>
  <el-tree-v2
    :data="data"
    :props="defaultProps"
    show-checkbox
    :height="240"
    @check-change="onCheck"
  />
</template>

<script lang="ts" setup>
import { TreeV2 as ElTreeV2 } from '@szhn/dh-design-pc'


const defaultProps = { children: 'children', label: 'label' }

const data = Array.from({ length: 6 }, (_, i) => ({
  value: `${i}`,
  label: `一级节点 ${i + 1}`,
  children: Array.from({ length: 4 }, (_, j) => ({
    value: `${i}-${j}`,
    label: `二级节点 ${i + 1}-${j + 1}`,
  })),
}))

const onCheck = (node: unknown, checked: boolean) => {
  console.log('check change', node, checked)
}
</script>

自定义节点内容 ​

节点的内容支持自定义，可以在节点区添加按钮或图标等内容。

<template>
  <el-tree-v2
    :data="data"
    :props="defaultProps"
    :height="260"
  >
    <template #default="{ node, data }">
      <span class="custom-node">
        <span>{{ node.label }}</span>
        <el-tag v-if="data.tag" size="small" type="primary" effect="plain">
          {{ data.tag }}
        </el-tag>
      </span>
    </template>
  </el-tree-v2>
</template>

<script lang="ts" setup>
import { TreeV2 as ElTreeV2, Tag as ElTag } from '@szhn/dh-design-pc'


const defaultProps = { children: 'children', label: 'label' }

const data = [
  {
    value: 'root',
    label: '组织架构',
    tag: '总部',
    children: [
      { value: '1', label: '研发中心', tag: 'R&D' },
      { value: '2', label: '产品设计部', tag: 'Design' },
      { value: '3', label: '运营部' },
    ],
  },
]
</script>

<style scoped>
.custom-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
</style>

树节点过滤 ​

树节点是可以被过滤的。在需要对节点进行过滤时，调用 Tree 实例的 filter 方法，参数为关键字。需要注意的是，此时需要设置 filter-method，值为过滤函数。

<template>
  <el-input v-model="query" placeholder="输入关键字过滤节点" clearable />
  <el-tree-v2
    ref="treeRef"
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    :filter-method="filterMethod"
    :filter-node-method="filterMethod"
    :height="260"
  />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { TreeV2 as ElTreeV2, Input as ElInput } from '@szhn/dh-design-pc'


const query = ref('')
const treeRef = ref<InstanceType<typeof ElTreeV2>>()

const defaultProps = { children: 'children', label: 'label' }

const data = Array.from({ length: 5 }, (_, i) => ({
  value: `${i}`,
  label: `部门 ${i + 1}`,
  children: Array.from({ length: 5 }, (_, j) => ({
    value: `${i}-${j}`,
    label: `成员 ${i + 1}-${j + 1}`,
  })),
}))

const filterMethod = (value: string, data: { label: string }) =>
  !value || data.label.includes(value)

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

<style scoped>
.filter-tree {
  margin-top: 12px;
}
</style>

API ​

Attributes ​

属性名说明类型默认值
data数据源array—
props配置项，用于指定 label / children 等字段object—
height树的高度number—
item-size每个节点的高度number26
show-checkbox是否显示多选框booleanfalse
default-expanded-keys默认展开的节点 key 数组array—
default-checked-keys默认勾选的节点 key 数组array—
filter-method过滤方法Function—
highlight-current是否高亮当前选中节点booleanfalse

Events ​

事件名说明回调参数
node-click节点被点击时触发(data, node, event)
check-change节点勾选状态发生变化时触发(data, checked)
current-change当前选中节点变化时触发(data, node)

更多细节参见 Element Plus Virtualized Tree 文档。