跳到主要内容

适用场景

以树形结构展示多层级的数据内容,如组织架构、物料信息、客户分类等

基础能力说明

绑定 JSON 数据,生成树组件

  1. 从组件库中拖出树组件后,默认会绑定一个示例 JSON 数据,开发者可参考该示例数据,构建业务所需的树形结构

  2. 除绑定静态 JSON 数据外,点击树节点属性右侧的 fx 按钮,在表达式编辑器中绑定格式匹配变量/表达式,同样可实现树的渲染

  3. 树节点数据要求为对象数据类型,各对象的 key 必须命名为

    1. label:节点名称,会直接显示在组件各节点上
    2. value:节点标识,可用于控制选中节点、展开节点
    3. disabled:布尔型,写入 true 表示当前节点禁用
    4. foldIcon:节点折叠时的图标(当前节点为父级节点且组件的「显示节点图标」属性开启时,写入 https 协议的图片地址,可在当前节点折叠时展示该图标)
    5. expendIcon:节点展开时的图标(当前节点为父级节点且组件的「显示节点图标」属性开启时,写入 https 协议的图片地址,可在当前节点折叠时展示该图标)
    6. leafIcon:叶子节点图标(当前节点为叶子节点且组件的「显示节点图标」属性开启时,写入 https 协议的图片地址,可在当前节点中展示该图标)
    7. children:子级节点数据需以对象数组形式放入该 key 对应的值中
  4. 树节点完整数据示例如下(如需显示图标,请开启「显示节点图标」属性;如期望仅配置 foldIcon、expendIcon、foldIcon 参数的节点显示图标,请清空「节点折叠时默认图标、节点展示时默认图标、叶子节点默认图标」属性中的值)

    [
    {
    "label": "行政中心",
    "value": "0",
    "foldIcon": "0a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177832",
    "expendIcon": "https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177833",
    "children": [
    {
    "label": "人力资源部",
    "value": "0-0",
    "foldIcon": "0a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177832",
    "expendIcon": "https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177833",
    "children": [
    {
    "label": "招聘组",
    "value": "0-0-0",
    "leafIcon": "https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177834"
    },
    {
    "label": "薪酬组",
    "value": "0-0-1"
    },
    {
    "label": "培训组",
    "value": "0-0-2"
    }
    ]
    },
    {
    "label": "行政部",
    "value": "0-1",
    "children": [
    {
    "label": "档案管理",
    "value": "0-1-0"
    },
    {
    "label": "后勤管理",
    "value": "0-1-1",
    "disabled": true
    },
    {
    "label": "行政管理",
    "value": "0-1-2"
    }
    ],
    "disabled": true
    }
    ]
    },
    {
    "label": "营销中心",
    "value": "1",
    "disabled": true,
    "children": [
    {
    "label": "市场部",
    "value": "1-0",
    "disabled": true
    },
    {
    "label": "策划部",
    "value": "1-1"
    },
    {
    "label": "大客户部",
    "value": "1-2"
    }
    ]
    }
    ]

配置选中节点

  1. 组件提供了「选中节点」属性,支持将节点的 value 以数组形式进行传入,例:
    1. 下图中,人力资源组节点的 value 为 0-0
    2. 如需将该节点默认选中,则在「选中节点」属性中写入 ["0-0"] 即可
  2. 「开启多选」属性为 true 时,各节点前将显示复选框,可进行多选,此时「选中节点」属性可传入多个节点的 value,构建为数组,实现默认选中多个节点

配置节点展开方式

  1. 节点展开方式可选择:展开所有节点、不展开、自定义
  2. 选择「自定义」后,将显示「展开的节点」属性,类似于「选中节点」属性的配置方式,将需展开节点的 value 以数组形式进行传入即可

扩展场景说明

选中不同节点时,获取节点信息,对数据表格进行动态过滤

以通过组织架构树进行人员信息表格过滤为例,进行说明:

  1. 创建一个人员信息数据模型,添加姓名和部门字段,并录入所需的人员和部门示例数据
  2. 利用布局组件、网格布局组件配合树组件和数据表格组件构建出以下页面样式,左侧为树形目录,右侧为数据表格
  3. 数据表格组件绑定所需人员信息模型,配置好所需展示的列
  4. 按需构建树的节点数据,组装出组织架构,要确保各节点的 value 和人员信息模型中的部门字段值匹配,选中节点属性配置为 ["招聘组"]
  5. 数据表格组件配置数据筛选属性,可查看到树组件的组件 id 为 tree1,故让部门字段等于树组件的选中值:$w.tree1.treeInfo.checked[0] (该函数为获取组件属性API的表达式写法,其中$w.{树组件 id}.treeInfo.checked 可获取树组件选中节点 value,因为目前未开启多选属性,所以取第一个选中节点[0]即可)
  6. 树组件配置「选中节点改变」事件时,触发人员信息表格的刷新事件
  7. 完成以上配置后,切换树组件中的部门,即可对人员信息表格进行动态数据过滤

对树节点进行搜索筛选

以通过单行输入组件对组织架构树进行搜索为例,进行说明:

  1. 页面中添加一个单行输入组件,隐藏标题;再添加一个树组件,按需配置好组织架构数据

  2. 单行输入组件的失去焦点事件,配置触发树组件的搜索节点方法,搜索内容写入$w.input1.value

    (该函数为获取组件属性 API 的表达式写法,其中$w.{表单组件 id}.value 可获取表单值)

  3. 完成以上配置后,在单行输入组件中输入部门名称后,组件失去焦点,即可对树组件的节点进行搜索过滤,符合搜索条件的节点内容,会自动被标红展示

属性说明

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
开启多选checkableboolean操作控制false开启后,将展示复选框,支持多选节点
选中节点checkedCustomarray操作控制[]请以数组形式写入选中节点的value,例如["0-0"]
节点展开方式expandType"all"|"none"|"custom"操作控制"all"设置树组件的节点展开方式
展开的节点expandCustomarray操作控制[]-
显示节点图标showIconboolean节点风格false开启后,各节点左侧将显示图标
节点折叠时默认图标foldIconstring节点风格"https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177832"设置节点在被折叠情况下的默认展示图标,如树节点属性中提供了自定义图标(foldIcon)参数,则其优先级高于该属性
节点展开时默认图标expendIconstring节点风格"https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177833"设置节点在被展开情况下的默认展示图标,如树节点属性中提供了自定义图标(expendIcon)参数,则其优先级高于该属性
叶子节点默认图标leafIconstring节点风格"https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177834"设置叶子节点的默认展示图标,如树节点属性中提供了自定义图标(leafIcon)参数,则其优先级高于该属性
显示节点连接线lineboolean节点风格false开启后,各节点间将显示连接线
树节点dataarray数据[{"label":"行政中心","value":"0","children":[{"label":"人力资源部","value":"0-0","children":[{"label":"招聘组","value":"0-0-0"},{"label":"薪酬组","value":"0-0-1"},{"label":"培训组","value":"0-0-2"}]},{"label":"行政部","value":"0-1","disabled":true,"children":[{"label":"档案管理","value":"0-1-0"},{"label":"后勤管理","value":"0-1-1","disabled":true},{"label":"行政管理","value":"0-1-2"}]}]},{"label":"营销中心","value":"1","children":[{"label":"市场部","value":"1-0"},{"label":"策划部","value":"1-1"},{"label":"大客户部","value":"1-2"}]},{"label":"生产中心","value":"2","children":[{"label":"生产部","value":"2-0"},{"label":"采购部","value":"2-1"},{"label":"仓储部","value":"2-2"},{"label":"质检部","value":"2-3"},{"label":"物流部","value":"2-4"}]}]树组件的节点数据

事件说明

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
选中节点改变selectNodeChange
  • treeInfo:object用户操作后的相关树信息
移动端,PC端用户选中的数据发生改变时触发,出参所选节点数据
节点展开/折叠nodeExpandChange
  • treeInfo:object用户操作后的相关树信息
移动端,PC端用户展开/折叠某节点时触发,出参被展开/折叠的节点数据

属性 API

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
树节点dataarray树组件的节点数据
开启多选checkableboolean开启后,将展示复选框,支持多选节点
选中节点checkedCustomarray请以数组形式写入选中节点的value,例如["0-0"]
节点展开方式expandType"all"|"none"|"custom"设置树组件的节点展开方式
展开的节点expandCustomarray
显示节点图标showIconboolean开启后,各节点左侧将显示图标
节点折叠时默认图标foldIconstring设置节点在被折叠情况下的默认展示图标,如树节点属性中提供了自定义图标(foldIcon)参数,则其优先级高于该属性
节点展开时默认图标expendIconstring设置节点在被展开情况下的默认展示图标,如树节点属性中提供了自定义图标(expendIcon)参数,则其优先级高于该属性
叶子节点默认图标leafIconstring设置叶子节点的默认展示图标,如树节点属性中提供了自定义图标(leafIcon)参数,则其优先级高于该属性
显示节点连接线lineboolean开启后,各节点间将显示连接线
当前树信息treeInfoobject用户操作后的相关树信息

方法 API

通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等

方法名
方法标识
方法说明
搜索节点searchNode搜索值

样式 API

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-tree树组件根元素
PC 端按钮根元素.wd-pc-tree可以为 PC 端的按钮编写样式
H5 端按钮根元素.wd-h5-tree可以为 H5 端的按钮编写样式
展开/折叠箭头.wd-tree__switcher展开/折叠箭头的样式
显示标签.wd-tree__label-text显示标签的样式
点击的节点背景.wd-tree-node.is-selected用户点击后节点标签的样式
连接线.wd-tree--line展示的连接线的样式

了解样式 API