Virtual Tree

虚拟树形组件

基础用法

基础的树形结构展示，传入 data 即可

vue
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue'
import { TreeData } from 'apathia-ui'

const data = shallowRef<TreeData>([])

const treeProps = {
  value: 'id',
  label: 'name',
}

onMounted(() => {
  data.value = Array.from({ length: 400 }).map((_, i) => ({
    id: String(i),
    name: `Node-${i}`,
    children: Array.from({ length: 3 }).map((_, index) => ({
      id: `${i}-${index}`,
      name: `Node-${i}-${index}`,
      children: Array.from({ length: 2 }).map((_, indexChild) => ({
        id: `${i}-${index}-${indexChild}`,
        name: `Node-${i}-${index}-${indexChild}`,
      })),
    })),
  }))
})
</script>

<template>
  <div style="width: 100%; height: 300px; overflow: hidden">
    <ap-virtual-tree :data="data" :props="treeProps"></ap-virtual-tree>
  </div>
</template>

自定义节点内容

节点的内容支持自定义，可以在配置节点的内容和显示图标

vue
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue'
import { TreeData } from 'apathia-ui'

const data = shallowRef<TreeData>([])

const treeProps = {
  value: 'id',
  label: 'name',
}

onMounted(() => {
  data.value = Array.from({ length: 400 }).map((_, i) => ({
    id: String(i),
    name: `Node-${i}`,
    children: Array.from({ length: 3 }).map((_, index) => ({
      id: `${i}-${index}`,
      name: `Node-${i}-${index}`,
      children: Array.from({ length: 2 }).map((_, indexChild) => ({
        id: `${i}-${index}-${indexChild}`,
        name: `Node-${i}-${index}-${indexChild}`,
      })),
    })),
  }))
})
</script>

<template>
  <div style="width: 100%; height: 300px; overflow: hidden">
    <ap-virtual-tree :data="data" :props="treeProps">
      <template #icon="{ node, expanded }">
        <ap-icon
          v-if="!node.isLeaf"
          :style="{
            transition: 'all 0.5s ease',
            transform: expanded ? 'rotate(90deg)' : 'rotate(0)',
          }"
        >
          <Expand />
        </ap-icon>
      </template>
      <template #content="{ node }">
        <ap-tag primary>{{ node.key }}</ap-tag>
        -
        <div>{{ node.label }}</div>
      </template>
    </ap-virtual-tree>
  </div>
</template>

高阶自定义

支持虚拟树任意内容的自定义

vue
<script lang="ts" setup>
import { onMounted, shallowRef } from 'vue'
import { TreeData } from 'apathia-ui'

const data = shallowRef<TreeData>([])

const treeProps = {
  value: 'id',
  label: 'name',
}

onMounted(() => {
  data.value = Array.from({ length: 400 }).map((_, i) => ({
    id: String(i),
    name: `Node-${i}`,
    children: Array.from({ length: 3 }).map((_, index) => ({
      id: `${i}-${index}`,
      name: `Node-${i}-${index}`,
      children: Array.from({ length: 2 }).map((_, indexChild) => ({
        id: `${i}-${index}-${indexChild}`,
        name: `Node-${i}-${index}-${indexChild}`,
      })),
    })),
  }))
})
</script>

<template>
  <div style="width: 100%; height: 300px; overflow: hidden">
    <ap-virtual-tree :data="data" :props="treeProps">
      <template #default="{ node }">
        <div class="node-content">
          <div style="width: 344px; padding: 0 16px 0 16px">
            col-1 {{ node.label }}
          </div>
          <div style="width: 140px; padding: 0 16px 0 16px">
            <ap-button primary plain>{{ node.label }}</ap-button>
          </div>
          <div style="width: 236px; padding: 0 16px 0 16px">
            col-3 <ap-tag warning>{{ node.label }}</ap-tag>
          </div>
        </div>
      </template>
      <template #stickyHeader>
        <div class="tree-header">
          <div style="width: 344px; padding: 0 16px 0 16px">Header-1</div>
          <div style="width: 140px; padding: 0 16px 0 16px">Header-2</div>
          <div style="width: 236px; padding: 0 16px 0 16px">Header-3</div>
        </div>
      </template>
      <template #empty>
        <div style="padding: 16px">暂无数据</div>
      </template>
    </ap-virtual-tree>
  </div>
</template>

<style scoped>
.tree-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(230, 232, 234, 1);
  background-color: rgba(249, 249, 249, 1);
  height: 40px;
  font-size: 14px;
  color: rgba(85, 91, 97, 1);
}
.node-content {
  display: flex;
  align-items: center;
  padding: 5px;
}
</style>

Props

prop	说明	类型	默认值
data	展示数据	TreeData[]	-
props	配置选项	Object	-
defaultExpandedKeys	默认展开的节点的 key 的数组	string[]	[]
indent	相邻级节点间的水平缩进，单位为像素	Number	16
currentNodeKey	当前选中的节点	String Number	-
minSize	自定义节点最小高度	Number	10
expandOnClickNode	是否在点击节点的时候展开或者收缩节点	Boolean	true

Slots

插槽名称	说明	参数
header	顶部	-
footer	底部	-
stickyFooter	粘性底部	-
stickyHeader	粘性顶部	-
icon	图标	-
content	节点内容	-
empty	空态	-

Events

事件名称	说明	回调参数
node-click	当节点被点击的时候触发	(data: TreeNodeData, node: ITreeNode, e: MouseEvent)
node-expand	节点被展开时触发的事件	(data: TreeNodeData, node: ITreeNode)
node-collapse	节点被收起时触发的事件	(data: TreeNodeData, node: ITreeNode)
current-change	当前选中节点变化时触发的事件	(data: TreeNodeData, node: ITreeNode)

Virtual Tree ​

基础用法 ​

自定义节点内容 ​

高阶自定义 ​

Props ​

Slots ​

Events ​

Virtual Tree

基础用法

自定义节点内容

高阶自定义

Props

Slots

Events