左侧树

爱搭贝
更新于2025-05-12

1.简介

树状导航是纵向导航中的一种,因其形状像树的分支结构而得名,树形通过逐级大纲的形式来展现信息的层级关系,高效且具有极佳的视觉可视性,使得整体信息框架一目了然。适用于 项目管理、CRM管理、物资管理、合同管理、文件管理等带有数据分类性质的且分类较多的系统中。
为满足用户的这一需求,「搭贝」提供了
树状结构(左侧)+数据展示(右侧) 的数据展示方式,可通过与当前表单数据相关联的其他表单数据生成左侧树。

2. 设置步骤

2.1举例--使用其他表单数据生成树

业务表单使用关联表单、下拉单选引用了其他表单的数据,希望使用引用的数据生成左侧树。

2.1.1创建生成树的表单

创建一个生成树的表单「区域」,表单中增加单行文本 区域名 、关联表单 上级 / 下拉单选 上级

  • 关联表单选择的表单是自己,关联字段选择的是 区域名
  • 下拉单选使用远端数据,内联表单选择的是自己,内联字段选择的是 区域名
左侧树-关联表单@1x.png
左侧树-下拉列表@1x.png
左侧树-新增数据@1x.png

2.1.2 创建业务表单

创建业务表单,增加关联表单 所属区域 / 下拉单选 所属区域

  • 关联表单组件的被关联表单选择的是 区域 表单,关联字段选择的是 区域名
  • 下拉单选使用远端数据,内联表单选择的是 区域 表单,内联字段选择的是 区域名
左侧树配置@1x.png
左侧树效果展示@1x.png

2.2举例--使用当前表单字段生成树

可使用当前表单的下拉单选组件生成树,前提是 下拉单选的选项使用的是静态数据。 创建业务表单,增加下拉单选 客户类型,下拉单选使用静态数据。

左侧树-静态数据配置1@1x.png
左侧树-静态数据@1x.png

3.容易遇到的问题及解决方案

问题1:业务数据与左侧树没有关联如何展示

解决方案:提供未分类节点的展示,所有与树节点无关的数据都可展示在此节点中

问题2:树的层级太深,找东西困难

解决方案:

1)提供树节点的关键字搜索

2)提供树的默认展开层级,每次进入列表不用每个节点展开收起都需要点击

问题3:树节点的顺序每次都会发生变化,无法形成记忆

解决方案:提供用户自定义顺序,可根据生成树的表单中某一字段进行排序,如 序号、创建时间等

问题4:对于一些作废的数据,不想在树上展示

解决方案:提供树节点的过滤,可通过配置过滤条件只把有效数据生成树

问题5:查看数据需要点一级看一级,太麻烦

解决方案:在树的下方提供查询节点及所有子节点的数据功能,可点击树节点,显示本节点及下属所有节点关联详情数据