跳到主要内容

树

概述
树形结构数据的展示，同时具备节点展开收起、选中、勾选、修改、删除以及更多自定义操作等交互功能。

应用场景
文件夹、组织架构、生物分类、国家地区等等。

Demo地址：【树组件】基本使用

基本操作​

树组件​

节点标识字段​

说明：默认为key，会根据节点位置生成唯一标识，存储在节点的key属性中。如果配置为节点的字段，要求所有节点的改字段值在整个树范围内不能重复。

默认展开​

说明：带有子项的树节点是否默认展开

勾选​

说明：开启时，树节点支持勾选

父子节点勾选联动​

说明：开启时，当勾选子节点，父节点的勾选框会出现勾选样式

禁用​

说明：配置树节点勾选框，是否默认禁用

输出父节点信息​

说明：开启时，当勾选子节点，获取的勾选数据会包含其父节点信息。 注：开启“父子节点勾选联动”配置项时，该配置项才生效。

添加节点​

说明：一个按钮，点击后，在树中追加一个节点。用于配置静态数据

勾选​

说明：开启时，可以定义勾选事件的逻辑处理

高级​

节点点击展开收起​

说明：开启时，点击树节点可以展开收起带有子项的节点。

节点操作项​

说明：开启时，树节点右侧出现操作按钮

操作列表​

说明：展示当前树节点的操作项列表。使用方式如下

  1. 点击“添加按钮”，为节点新增一个操作项
  2. 选中左侧图标进行拖拽，可以修改按钮的相对位置
省略展示​

说明：开启时，可以配置树节点右侧操作项最多展示几个按钮，超出的按钮以下拉按钮的形式进行展示。 注：省略展示仅在 调试/预览/发布 生效

省略显示样式​

说明：下拉按钮的触发方式

超过时省略​

说明：展示在节点右侧的最大按钮数量，超出数量的按钮展示在下拉菜单中

添加节点​

说明：开启时，树组件支持添加节点功能

支持添加节点的最大深度​

说明：设置允许添加节点的最大深度，0表示不限制

逻辑编排​

节点点击​

输出时机：点击树节点时 输出数据：长度为1的数组，数组项为当前节点的key字段

勾选事件​

输出时机：点击树节点前的勾选框时 输出数据：一个数组，数组项为已勾选的节点的key字段

添加完成​

关联配置项：“高级-添加节点”配置项开启时 输出时机：点击“添加节点”，在输入框中触发回车 输出数据：当前节点数据 和 当前节点的父节点数据

样式​

树组件​

显示连线​

树节点公共样式​

树节点选中样式​

树节点勾选样式​

树节点图标配置​

树节点​

当前节点样式​

说明：用于静态数据的节点样式配置

输入项​

输入项说明数据类型
输入数据
[
  {
    "title": "文本",
    "key": "文本",
    "disableCheckbox": "布尔",
    "children": [
      "任意对象"
    ]
  }
]
更新节点数据
{
  "title": "文本",
  "children": [
    "任意对象"
  ]
}
搜索"文本"
过滤"文本"
设置选中节点
[
  "文本"
]
设置展开节点
[
  "文本"
]
设置展开深度"数字"
设置拖拽功能
{
  "draggable": "enum",
  "draggableScript": "文本",
  "allowDrop": "enum",
  "allowDropScript": "文本",
  "useDropScope": "enum",
  "dropScopeMessage": "文本"
}
获取数据"任意"

输出项​

输出项说明数据类型
数据变化
[
  {
    "title": "文本",
    "key": "文本",
    "children": [
      "任意对象"
    ]
  }
]
数据输出
[
  {
    "title": "文本",
    "key": "文本",
    "children": [
      "任意对象"
    ]
  }
]
勾选项数据输出
[
  "文本"
]
节点选中事件
[
  "文本"
]
添加完成
{
  "node": {
    "title": "文本",
    "value": "文本",
    "key": "文本"
  },
  "parent": "任意对象"
}
修改
{
  "title": "文本",
  "key": "文本",
  "value": "文本",
  "disableCheckbox": "布尔"
}
删除
{
  "title": "文本",
  "key": "文本",
  "value": "文本",
  "disableCheckbox": "布尔"
}
拖拽完成
{
  "dragNodeInfo": {
    "parent": {
      "title": "文本",
      "key": "文本"
    },
    "node": {
      "title": "文本",
      "key": "文本"
    },
    "index": "数字"
  },
  "dropNodeInfo": {
    "parent": {
      "title": "文本",
      "key": "文本"
    },
    "node": {
      "title": "文本",
      "key": "文本"
    },
    "index": "数字"
  },
  "flag": "enum",
  "treeData": [
    {
      "title": "文本",
      "key": "文本",
      "children": [
        "任意对象"
      ]
    }
  ]
}

配置项​

配置项 说明 类型 可选项 展示条件
基础
使用静态数据源开关
标题字段文本
标识字段所有节点的标识字段值在整个树范围内不能重复。不填时会根据节点位置生成唯一标识，存储在key属性中。文本
子节点字段文本
输出数据单选
标题超出省略内容超出宽度后文本是否自动省略、不换行、以省略号结尾，并悬浮显示完整内容开关
默认展开深度0表示全部折叠, -1表示全部展开数字输入
节点点击展开收起开关
自定义空状态图片开关
图片地址图片上传是
空状态文案自定义描述内容文本
节点选中事件
数据变化事件
高级
过滤字段配置树的过滤字段下拉选择
节点禁用表达式根据节点数据在运行时动态设置节点禁用的表达式，支持JS表达式语法, 例：{node.disabled}表达式
支持勾选单选
节点可勾选表达式根据节点数据在运行时动态显示节点勾选框的表达式，支持JS表达式语法, 例：{node.checkable}表达式是
勾选事件开关是
勾选事件事件是
父子节点勾选联动关闭后，可以单独勾选父节点，子节点不再被联动选择。开关是
禁用勾选框开关是
输出父节点信息开关是
支持拖拽单选
节点可拖拽表达式根据节点数据在运行时动态计算节点是否可拖拽的表达式，支持JS表达式语法, 例：{node.draggable}表达式是
支持放置单选是
节点可放置表达式根据节点数据在运行时动态计算节点上下是否可放置节点的表达式，支持JS表达式语法, 例：{node.isLeaf}表达式是
放置范围限制单选是
禁止放置提示语文本是
拖拽完成事件
节点操作项开关
显示方式单选是
按钮列表选中拖拽各项左侧手柄，可改变按钮的相对位置数组
超出省略展示配置按钮的最大显示个数，实现省略样式。省略样式在调试/预览/发布生效开关
省略按钮弹出方式单选是
最大显示按钮数数字输入是
可添加节点开启后，树组件支持添加节点功能开关
支持添加节点的最大深度设置允许添加节点的最大深度，0表示不限制数字输入是
添加完成事件是
样式
显示连线开关
可滚动高度文本
树组件样式样式border,background
树节点公共样式样式font
树节点公共样式样式border,background
空状态图片样式size,border,background
空状态文案样式font
树节点公共样式样式font
树节点公共样式样式border,background
树节点公共样式样式font
树节点公共样式样式border,background
树节点公共样式样式font
树节点公共样式样式border,background

树节点配置项​

配置项 说明 类型 可选项 展示条件
样式
当前节点样式样式font

操作项​

配置项 说明 类型 可选项 展示条件
基础
隐藏修改操作开关
隐藏删除操作开关
支持非叶节点删除开关是
显示方式单选是
按钮列表选中拖拽各项左侧手柄，可改变按钮的相对位置数组
超出省略展示配置按钮的最大显示个数，实现省略样式。省略样式在调试/预览/发布生效开关
省略按钮弹出方式单选是
最大显示按钮数数字输入是

操作​

配置项 说明 类型 可选项 展示条件
样式
风格下拉选择
危险按钮开关
图标来源单选
图标库图标是
上传图片上传是
尺寸数字输入是
间距图标与文字间的距离数字输入是
按钮样式样式border,font,background
按钮样式样式border,font,background
按钮样式样式border,font,background
按钮样式样式border,font,background

其他​

能力支持
支持尺寸调整宽
生成源码不支持
AI不支持