前言：
树组件是一种用于展示层级结构数据的UI组件，通过父子节点的嵌套关系直观呈现数据层次（如文件目录、组织架构等）。它支持节点的展开/折叠、选择、编辑等交互操作，通常具有清晰的视觉连接线和状态标识，能够高效管理和浏览多级数据，广泛应用于文件管理、导航菜单、数据分类等场景，是处理复杂结构化数据的理想界面解决方案。
那么，现在我来教你在Axure里做一个实用的树组件。
演示地址：
https://dtcagw.axshare.com/#id=zqplmg&g=1
教程：
首先先来看一下元件结构：
是不是非常简洁？
- 元件说明：
- 矩形bg：为了实现鼠标悬停，选中等效果，样式自己加。
- 动态面板expand：图标换成自己的。
- （组合）：方便控制层级缩进
- （动态面板）：“触发内部元件鼠标交互样式”打勾
中继器数据如下：
| id | text | path | level | order | expand | check | leaf | hide |
| 1 | 系统管理 | 1 | 1 | 1 | t | i | f | f |
| 2 | 仪表盘 | 1/2 | 2 | 2 | t | c | f | f |
| 3 | 首页概览 | 1/2/3 | 3 | 3 | t | c | t | f |
| 4 | 数据统计 | 1/2/4 | 3 | 4 | t | c | t | f |
| 5 | 系统设置 | 1/5 | 2 | 5 | t | i | f | f |
| 6 | 基本设置 | 1/5/6 | 3 | 6 | t | c | t | f |
| 7 | 系统日志 | 1/5/7 | 3 | 7 | t | u | t | f |
| 8 | 内容管理 | 8 | 1 | 8 | t | u | f | f |
| 9 | 文章管理 | 8/9 | 2 | 9 | t | u | f | f |
| 10 | 文章列表 | 8/9/10 | 3 | 10 | t | u | t | f |
| 11 | 分类管理 | 8/9/11 | 3 | 11 | t | u | t | f |
| 12 | 评论管理 | 8/12 | 2 | 12 | t | u | f | f |
| 13 | 评论审核 | 8/12/13 | 3 | 13 | t | u | t | f |
| 14 | 运营管理 | 14 | 1 | 14 | f | u | f | f |
| 15 | 会员管理 | 14/15 | 2 | 15 | f | u | f | t |
| 16 | 会员等级 | 14/15/16 | 3 | 16 | f | u | t | t |
| 17 | 积分管理 | 14/15/17 | 3 | 17 | f | u | t | t |
- 字段说明：
id：唯一标识符text：显示文本path：路径层级信息（斜杠分隔）level：层级order：排序序号expand：是否展开（t-是，f-否）check：选中状态（i-部分选中，c-选中，u-未选中）leaf：是否为叶子节点（t-是，f-否）hide：是否隐藏（t-是，f-否）
- 字段解释：
- 虽然通过path可以直接算出level，为了方便折叠和展开，把level独立为一列。
- 排序order字段可以写小数，比如想在3和4之间加一行，那order可以写3.14。
- path使用斜杠分隔，在扩展时无需新增额外列，还可以更好地判断层级关系。
中继器交互如下：
动态面板expand的交互如下：
此时，一个可以展开折叠的多级菜单就完成了。
为了操作友好，还可以在动态面板上加交互：
结语
一个无限层级的树结构非常容易实现， 适用于 任何具有层级关系的数据，能够有效提升信息的组织性和可操作性。无论是文件管理、导航菜单、组织结构，还是分类目录，树形结构都能提供直观、高效的交互方式。
如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。
转载请注明：最InのAxure » Axure无限级导航菜单（基础树TREE组件）