Tree
WdTree
Applicable Scenarios
Displays multi-level data content in a tree structure, such as organizational structures, material information, customer categories, etc.
Basic Capabilities Description
Binding JSON Data to Generate the Tree Component
After dragging the tree component from the component library, a sample JSON data is bound by default. Developers can refer to this sample data to build the tree structure required by their business.
In addition to binding static JSON data, clicking the fx button to the right of the tree node properties and binding format-matching variables/expressions in the expression editor can also render the tree.
Tree node data must be of object data type, and the key of each object must be named
- label: Node name, which will be directly displayed on each node of the component
- value: Node identifier, which can be used to control selected nodes and expanded nodes
- disabled: Boolean, set to true indicates the current node is disabled
- foldIcon: The icon when the node is collapsed (When the current node is a parent node and the component's "Show Node Icon" property is enabled, specify an image URL in https protocol to display this icon when the node is collapsed)
- expendIcon: The icon when the node is expanded (When the current node is a parent node and the component's "Show Node Icon" property is enabled, specify an image URL in https protocol to display this icon when the node is expanded)
- leafIcon: The icon for leaf nodes (When the current node is a leaf node and the component's "Show Node Icon" property is enabled, specify an image URL in https protocol to display this icon in the current node)
- children: Child node data must be placed in the form of an object array in the value corresponding to this key.
A complete example of tree node data is as follows (If you need to display icons, enable the "Show Node Icon" property; if you want only nodes configured with foldIcon, expendIcon, foldIcon parameters to display icons, clear the values in the "Default Icon When Node Collapsed", "Default Icon When Node Expanded", "Default Icon for Leaf Nodes" properties)
[
{
"label": "Administrative Center",
"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": "Human Resources Department",
"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": "Recruitment Group",
"value": "0-0-0",
"leafIcon": "https://lowcode-1gk9y5ik310a94df-1307578329.tcloudbaseapp.com/resources/2023-05/lowcode-1177834"
},
{
"label": "Compensation Group",
"value": "0-0-1"
},
{
"label": "Training Group",
"value": "0-0-2"
}
]
},
{
"label": "Administrative Department",
"value": "0-1",
"children": [
{
"label": "Archives Management",
"value": "0-1-0"
},
{
"label": "Logistics Management",
"value": "0-1-1",
"disabled": true
},
{
"label": "Administrative Management",
"value": "0-1-2"
}
],
"disabled": true
}
]
},
{
"label": "Marketing Center",
"value": "1",
"disabled": true,
"children": [
{
"label": "Marketing Department",
"value": "1-0",
"disabled": true
},
{
"label": "Planning Department",
"value": "1-1"
},
{
"label": "Key Account Department",
"value": "1-2"
}
]
}
]
Configure Selected Nodes
- The component provides a "Selected Nodes" property, which supports passing node values in the form of an array, for example:
- In the figure below, the value of the Human Resources group node is 0-0
- To set this node as selected by default, write ["0-0"] in the "Selected Nodes" property.
- In the figure below, the value of the Human Resources group node is 0-0
- When the "Enable Multiple Selection" property is set to true, checkboxes will appear before each node, allowing multiple selections. At this time, the "Selected Nodes" property can accept the values of multiple nodes, constructed as an array, to achieve default selection of multiple nodes.
Configure Node Expansion Mode
- Node expansion mode options include: Expand all nodes, Do not expand, Custom
- After selecting "Custom", the "Expanded Nodes" property will be displayed. Similar to the configuration method of the "Selected Nodes" property, simply pass the value of the nodes to be expanded in the form of an array.
Extended Scenarios Description
When different nodes are selected, retrieve node information and dynamically filter the data table
Take filtering the personnel information table through the organizational structure tree as an example for illustration:
- Create a personnel information data model, add name and department fields, and enter the required sample data for personnel and departments
- Use layout components and grid layout components in conjunction with tree components and data table components to build the following page layout, with a tree directory on the left and a data table on the right.
- Bind the data table component to the required personnel information model and configure the columns to be displayed.
- Build the tree node data on demand to assemble the organizational structure, ensuring that the value of each node matches the department field value in the personnel information model, and configure the selected node property to ["Recruitment Group"]
- Configure the data filter property for the data table component. You can see that the component id of the tree component is tree1, so set the department field equal to the selected value of the tree component: $w.tree1.treeInfo.checked[0]
(This function uses the expression syntax of the component property API, where
$w.{tree component id}.treeInfo.checkedretrieves the value of the selected node in the tree component. Since the multiple selection feature is not enabled, taking the first selected node [0] suffices.)
- When configuring the "selected node change" event for the tree component, trigger the refresh event of the personnel information table.
- After completing the above configurations, switching departments in the tree component enables dynamic data filtering of the personnel information table.
Search and Filter Tree Nodes
Take searching the organizational structure tree via a single-line input component as an example for illustration:
Add a single-line input component to the page and hide its title; then add a tree component and configure the organizational structure data as needed.
Configure the blur event of the single-line input component to trigger the node search method of the tree component, writing the search content to $w.input1.value
(This function uses the expression syntax of the component property API, where
$w.{form component id}.valueretrieves the form value.)
After completing the above configurations, when you enter a department name in the single-line input component and it loses focus, the tree component's nodes will be searched and filtered, with matching node content automatically highlighted in red.
Tree Component Supports Scoped Slots
After upgrading to version 3.19.0, the Tree component supports scoped slots. By selecting advanced properties and enabling the slot, a content slot will be added to the outline tree, allowing custom content to be added to the slot node.
You can use the expression
$w.tree1.contentSlot_treeNode.itemto retrieve detailed information about tree nodes.
You can use style APIs to customize tree node styles.
Default text nodes support search highlighting. You can disable this feature and customize the display through text nodes.
Property Description
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
|---|
| 开启多选 | checkable | boolean | 开启后，将展示复选框，支持多选节点 示例：false |
| 选中节点 | checkedCustom | array | 请以数组形式写入选中节点的value，例如["0-0"] 请以数组形式写入选中节点的value，例如["0-0"] 示例：[] |
| 节点展开方式 | expandType | string | 设置树组件的节点展开方式 示例："all" |
| 展开的节点 | expandCustom | array | 请以数组形式写入展开节点的value，例如["0-0","0-1"] 示例：[] |
| 显示节点图标 | showIcon | boolean | 开启后，各节点左侧将显示图标 示例：false |
| 节点折叠时默认图标 | foldIcon | string | 设置节点在被折叠情况下的默认展示图标，如树节点属性中提供了自定义图标(foldIcon)参数，则其优先级高于该属性 示例："data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.5%201.5C0.5%200.947715%200.947716%200.5%201.5%200.5H4.42857H4.5906L4.72183%200.595029L6.66202%202H12.5C13.0523%202%2013.5%202.44772%2013.5%203V11C13.5%2011.5523%2013.0523%2012%2012.5%2012H1.5C0.947716%2012%200.5%2011.5523%200.5%2011L0.5%201.5ZM4.26655%201.5L1.5%201.5V11H12.5V3H6.5H6.33798L6.20675%202.90497L4.26655%201.5Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.9%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E" |
| 节点展开时默认图标 | expendIcon | string | 设置节点在被展开情况下的默认展示图标，如树节点属性中提供了自定义图标(expendIcon)参数，则其优先级高于该属性 示例："data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.00594%207.01372C4.08104%206.82224%204.26574%206.69629%204.47142%206.69629H14.3231C14.6754%206.69629%2014.9172%207.05089%2014.7886%207.37886L12.5892%2012.9863C12.5141%2013.1778%2012.3294%2013.3037%2012.1237%2013.3037H2.27206C1.91976%2013.3037%201.67794%2012.9491%201.80658%2012.6211L4.00594%207.01372Z%22%20stroke%3D%22black%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.789062%203.19629C0.789062%202.64401%201.23678%202.19629%201.78906%202.19629L5.39249%202.19629L7.46392%203.84701H11.7891C12.3413%203.84701%2012.7891%204.29472%2012.7891%204.84701V6.19629H11.7891V4.84701H7.1142L5.04278%203.19629L1.78906%203.19629V12.8017L6.78906%2012.8017V13.8017L1.78906%2013.8017C1.23678%2013.8017%200.789062%2013.354%200.789062%2012.8017V3.19629Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.9%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E" |
| 叶子节点默认图标 | leafIcon | string | 设置叶子节点的默认展示图标，如树节点属性中提供了自定义图标(leafIcon)参数，则其优先级高于该属性 示例："data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2214%22%20viewBox%3D%220%200%2012%2014%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.49534%200C1.02005%200%200.5%200.337268%200.5%200.921911V13.0781C0.5%2013.6627%201.02005%2014%201.49534%2014L10.5047%2014.0001C10.9799%2014.0001%2011.5%2013.6628%2011.5%2013.0782V4.70718C11.5%204.44196%2011.3946%204.18761%2011.2071%204.00007L7.5%200.292962C7.31246%200.105429%207.05812%207.22706e-05%206.7929%206.88434e-05L1.49534%200ZM6.50005%201.00007V5.01283H10.5V13.0001L1.5%2013V1L6.50005%201.00007ZM7.50005%201.70722L9.80565%204.01283H7.50005V1.70722Z%22%20fill%3D%22black%22%20fill-opacity%3D%220.9%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E" |
| 显示节点连接线 | line | boolean | 开启后，各节点间将显示连接线 示例：false |
| 开启插槽 | isSupportSlot | boolean | 示例：false |
| 显示默认文本节点 | enableSearchText | boolean | 开启后展示默认文本节点，该节点支持搜索高亮 默认值：true |
| 树节点 | data | array | 树组件的节点数据 示例：[ { "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" } ] } ] |
Event Description
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 选中节点改变 | selectNodeChange | object
| 移动端,PC端 | 用户选中的数据发生改变时触发，出参所选节点数据 |
| 节点展开/折叠 | nodeExpandChange | object
| 移动端,PC端 | 用户展开/折叠某节点时触发，出参被展开/折叠的节点数据 |
Property API
通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API
只读属性名 | 属性标识 | 类型 | 说明 |
|---|
| 树节点 | data | array | 树组件的节点数据 |
| 开启多选 | checkable | boolean | 开启后，将展示复选框，支持多选节点 |
| 已选中的节点列表 | checkedNodes | array | |
| 已展开的节点列表 | expandedNodes | array | |
| 选中节点 | checkedCustom | array | 请以数组形式写入选中节点的value，例如["0-0"] |
| 节点展开方式 | expandType | string | 设置树组件的节点展开方式 |
| 展开的节点 | expandCustom | array | |
| 显示节点图标 | showIcon | boolean | 开启后，各节点左侧将显示图标 |
| 节点折叠时默认图标 | foldIcon | string | 设置节点在被折叠情况下的默认展示图标，如树节点属性中提供了自定义图标(foldIcon)参数，则其优先级高于该属性 |
| 节点展开时默认图标 | expendIcon | string | 设置节点在被展开情况下的默认展示图标，如树节点属性中提供了自定义图标(expendIcon)参数，则其优先级高于该属性 |
| 叶子节点默认图标 | leafIcon | string | 设置叶子节点的默认展示图标，如树节点属性中提供了自定义图标(leafIcon)参数，则其优先级高于该属性 |
| 显示节点连接线 | line | boolean | 开启后，各节点间将显示连接线 |
| 当前树信息 | treeInfo | object | 用户操作后的相关树信息 |
| 当前树的扁平化结构信息 | treeNodeList | array |
Method API
通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()
方法名 | 方法标识 | 参数 | 方法说明 |
|---|
| 搜索节点 | searchNode | object
| 搜索值 |
Style API
通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 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 | 展示的连接线的样式 |
| 节点容器区域 | .wd-tree-node | 可以编写节点容器的样式 |