Skip to content

Tree 树形控件

展示和操作层级数据。清晰呈现业务事实、状态和变化。

实时示例

LIVE · TreeElement Plus / sunui
内容运营
选题库
发布计划
企业服务
Vue 示例
<el-tree />

使用规则

应该

先保证扫描与比较效率,再增加视觉强调;必须定义加载、空和错误状态。

避免

不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。

状态与变体

  • 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
  • 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
  • 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。

基础用法

<el-tree>树形控件</el-tree>

设计变量

color.background.surfacecolor.text.secondaryspacing.mdshadow.sm

无障碍

状态同时使用文字;图片提供替代文本;复杂数据结构支持键盘浏览。