Tree 树形控件

Tree 用于展示具有父子关系的层级数据。VISTA B 直接使用 Element Plus 的 el-tree，适合组织架构、权限范围、分类目录和资源树等场景。

基础用法

通过 data 传入节点数据，使用 props 指定子节点和标签字段。

业务中心

项目管理

项目看板

任务分配

报价配置

价目表

折扣规则

系统设置

角色权限

操作日志

vue

<template>
  <el-tree :data="data" :props="props" default-expand-all />
</template>

<script setup lang="ts">
const props = {
  children: 'children',
  label: 'label',
}

const data = [
  {
    label: '业务中心',
    children: [{ label: '项目管理' }, { label: '报价配置' }],
  },
]
</script>

可选择

设置 show-checkbox 后节点前会显示复选框。需要配合 node-key 使用默认勾选、获取勾选节点等能力。

vue

<template>
  <el-tree
    :data="data"
    node-key="id"
    show-checkbox
    :default-expanded-keys="[1]"
    :default-checked-keys="[3]"
  />
</template>

禁用节点

节点数据中设置 disabled 后，该节点不可被选中。

vue

<template>
  <el-tree :data="data" node-key="id" show-checkbox default-expand-all />
</template>

<script setup lang="ts">
const data = [
  {
    id: 1,
    label: '组织管理',
    children: [
      { id: 2, label: '总部' },
      { id: 3, label: '归档部门', disabled: true },
    ],
  },
]
</script>

默认展开和当前节点

通过 default-expanded-keys 控制默认展开节点，通过 current-node-key 和 highlight-current 标记当前节点。

业务中心

项目管理

项目看板

任务分配

报价配置

系统设置

vue

<el-tree
  :data="data"
  node-key="id"
  highlight-current
  :default-expanded-keys="[1, 2]"
  :current-node-key="3"
/>

节点过滤

调用 Tree 实例的 filter 方法并提供 filter-node-method，可以按关键字过滤节点。

业务中心

项目管理

项目看板

任务分配

报价配置

价目表

折扣规则

系统设置

角色权限

操作日志

vue

<template>
  <el-input v-model="filterText" placeholder="输入关键字过滤" clearable />
  <el-tree
    ref="treeRef"
    :data="data"
    :filter-node-method="filterNode"
    default-expand-all
  />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

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

watch(filterText, (value) => {
  treeRef.value?.filter(value)
})

const filterNode = (value: string, data: { label: string }) => {
  if (!value) return true
  return data.label.includes(value)
}
</script>

手风琴模式

设置 accordion 后，同一层级每次只展开一个节点。

业务中心

系统设置

vue

<el-tree :data="data" accordion />

懒加载

设置 lazy 和 load 后，节点会在展开时动态加载子节点。props.isLeaf 用于声明叶子节点。

华东大区

华南大区

vue

<template>
  <el-tree :props="props" lazy :load="loadNode" />
</template>

<script setup lang="ts">
const props = {
  label: 'label',
  children: 'children',
  isLeaf: 'isLeaf',
}

const loadNode = (node, resolve) => {
  if (node.level === 0) {
    resolve([{ label: '华东大区' }, { label: '华南大区' }])
    return
  }

  resolve([{ label: '门店 A', isLeaf: true }])
}
</script>

自定义节点内容

默认插槽接收 node 和 data，可以在节点内展示图标、标签、数量或操作按钮。

业务中心目录

项目管理目录

项目看板页面

任务分配页面

报价配置目录

价目表页面

折扣规则页面

系统设置目录

角色权限页面

操作日志页面

vue

<el-tree :data="data" default-expand-all>
  <template #default="{ node, data }">
    <span class="custom-tree-node">
      <span>{{ node.label }}</span>
      <el-tag size="small">{{ data.type }}</el-tag>
    </span>
  </template>
</el-tree>

拖拽节点

设置 draggable 后可拖拽节点。通过 allow-drag 和 allow-drop 可以限制可拖动节点与可放置位置。

门户导航

首页

项目中心

管理后台

用户管理

审计日志

拖动节点后在这里显示放置结果

vue

<template>
  <el-tree
    :data="data"
    node-key="id"
    draggable
    :allow-drag="allowDrag"
    :allow-drop="allowDrop"
    @node-drop="handleDrop"
  />
</template>

<script setup lang="ts">
const allowDrag = (node) => !node.data.disabled
const allowDrop = (_draggingNode, _dropNode, type) => type !== 'inner'
const handleDrop = (draggingNode, dropNode, dropType) => {
  console.log(draggingNode.data, dropNode.data, dropType)
}
</script>

空状态

没有节点数据时会展示 empty-text，也可以通过 empty 插槽自定义空内容。

暂无组织数据

vue

<el-tree :data="[]" empty-text="暂无组织数据">
  <template #empty>
    <HomeVistaEmpty title="暂无组织数据" :image-size="120" />
  </template>
</el-tree>

API

Tree 属性

属性	说明	类型	默认值
`data`	展示数据	`array`	`[]`
`empty-text`	内容为空时显示的文本	`string`	`暂无数据`
`node-key`	每个树节点的唯一标识字段，使用勾选、当前节点等能力时必填	`string`	`-`
`props`	配置选项，指定节点字段映射	`object`	`-`
`render-after-expand`	是否在第一次展开某个节点后才渲染其子节点	`boolean`	`true`
`load`	懒加载子节点的方法	`function`	`-`
`render-content`	自定义树节点内容的渲染函数	`function`	`-`
`highlight-current`	是否高亮当前选中节点	`boolean`	`false`
`default-expand-all`	是否默认展开所有节点	`boolean`	`false`
`expand-on-click-node`	是否在点击节点时展开或收起节点	`boolean`	`true`
`check-on-click-node`	是否在点击节点时选中复选框	`boolean`	`false`
`check-on-click-leaf`	是否在点击叶子节点时选中复选框	`boolean`	`true`
`auto-expand-parent`	展开子节点时是否自动展开父节点	`boolean`	`true`
`default-expanded-keys`	默认展开节点的 key 数组	`array`	`[]`
`show-checkbox`	节点是否可被选择	`boolean`	`false`
`check-strictly`	是否严格遵循父子节点不互相关联	`boolean`	`false`
`check-descendants`	设置 `check-strictly` 时，是否仍检查后代节点状态	`boolean`	`false`
`default-checked-keys`	默认勾选节点的 key 数组	`array`	`[]`
`current-node-key`	当前选中节点的 key	`string \| number`	`-`
`filter-node-method`	过滤节点的方法	`function`	`-`
`accordion`	是否每次只打开同级树节点中的一个	`boolean`	`false`
`indent`	相邻层级节点间的水平缩进，单位 px	`number`	`18`
`icon`	自定义树节点展开图标	`string \| Component`	`-`
`lazy`	是否懒加载子节点	`boolean`	`false`
`draggable`	是否开启节点拖拽	`boolean`	`false`
`allow-drag`	判断节点是否允许拖拽的方法	`function`	`-`
`allow-drop`	拖拽时判断目标节点是否可被放置的方法	`function`	`-`

Tree 事件

事件名	说明	类型
`node-click`	节点被点击时触发	`Function`
`node-contextmenu`	节点被右键点击时触发	`Function`
`check-change`	节点勾选状态变化时触发	`Function`
`check`	点击节点复选框后触发	`Function`
`current-change`	当前选中节点变化时触发	`Function`
`node-expand`	节点被展开时触发	`Function`
`node-collapse`	节点被收起时触发	`Function`
`node-drag-start`	节点开始拖拽时触发	`Function`
`node-drag-enter`	拖拽节点进入目标节点时触发	`Function`
`node-drag-leave`	拖拽节点离开目标节点时触发	`Function`
`node-drag-over`	拖拽节点悬停在目标节点时触发	`Function`
`node-drag-end`	节点拖拽结束时触发	`Function`
`node-drop`	节点拖拽放置成功时触发	`Function`

Tree 插槽

插槽	说明
`default`	自定义树节点内容，作用域参数为 `{ node, data }`
`empty`	自定义空状态内容

Tree 暴露

名称	说明	类型
`filter`	对树节点进行过滤	`Function`
`getNodeKey`	获取节点的 key	`Function`
`getNodePath`	获取节点路径	`Function`
`getCheckedNodes`	获取当前被勾选的节点数组	`Function`
`getCheckedKeys`	获取当前被勾选节点的 key 数组	`Function`
`getCurrentNode`	获取当前选中节点	`Function`
`getCurrentKey`	获取当前选中节点的 key	`Function`
`setCheckedNodes`	设置当前勾选节点数组	`Function`
`setCheckedKeys`	通过 key 数组设置当前勾选节点	`Function`
`setChecked`	设置单个节点的勾选状态	`Function`
`getHalfCheckedNodes`	获取当前半选中的节点数组	`Function`
`getHalfCheckedKeys`	获取当前半选中节点的 key 数组	`Function`
`setCurrentNode`	设置当前选中节点	`Function`
`setCurrentKey`	通过 key 设置当前选中节点	`Function`
`getNode`	根据 data 或 key 获取节点	`Function`
`remove`	删除节点	`Function`
`append`	为指定节点追加子节点	`Function`
`insertBefore`	在指定节点前插入节点	`Function`
`insertAfter`	在指定节点后插入节点	`Function`
`updateKeyChildren`	通过 key 更新某个节点的子节点	`Function`

Props 配置

属性	说明	类型	默认值
`label`	指定节点标签字段	`string \| function`	`label`
`children`	指定子节点字段	`string`	`children`
`disabled`	指定禁用节点字段	`string \| function`	`disabled`
`isLeaf`	指定叶子节点字段，在懒加载模式下生效	`string \| function`	`isLeaf`
`class`	指定节点自定义 class 字段	`string \| function`	`-`

Tree 树形控件 ​

基础用法 ​

可选择 ​

禁用节点 ​

默认展开和当前节点 ​

节点过滤 ​

手风琴模式 ​

懒加载 ​

自定义节点内容 ​

拖拽节点 ​

空状态 ​

API ​

Tree 属性 ​

Tree 事件 ​

Tree 插槽 ​

Tree 暴露 ​

Props 配置 ​

Tree 树形控件

基础用法

可选择

禁用节点

默认展开和当前节点

节点过滤

手风琴模式

懒加载

自定义节点内容

拖拽节点

空状态

API

Tree 属性

Tree 事件

Tree 插槽

Tree 暴露

Props 配置