本文介绍如何在 Lightning Web Components (LWC) 中，不依赖 lightning-tree 组件，而是通过自定义组件和递归方法，将层级 JSON 数据渲染成可折叠的树形结构。通过示例代码，详细讲解了组件的实现思路和关键步骤，并提供了注意事项，帮助开发者高效地构建自定义树形组件。
在 Salesforce Lightning Web Components (LWC) 开发中，有时需要将层级结构的 JSON 数据以树形结构展示给用户。虽然 Salesforce 提供了 lightning-tree 组件，但在某些情况下，我们可能需要更灵活的自定义解决方案。本文将介绍如何使用 LWC 自定义组件，结合递归方法，实现一个可折叠的树形结构，而无需依赖 lightning-tree 组件。
实现思路
核心思路是创建一个可以递归调用的 LWC 组件。该组件接收一个包含层级数据的 JSON 对象作为输入，并根据数据的结构动态生成 HTML 元素，实现树形结构的展示。每个节点都可以展开或折叠，以显示或隐藏其子节点。
组件代码示例
首先，创建名为 treeNode 的 LWC 组件。
treeNode.html:
<template>
<div class="tree-node">
<div class="node-header" onclick={toggleNode}>
<template if:true={hasChildren}>
<lightning-icon icon-name={iconName} size="x-small" alternative-text="Toggle"></lightning-icon>
</template>
<span class="node-label">{node.label}</span>
</div>
<template if:true={isExpanded}>
<div class="node-children">
<template for:each={node.items} for:item="item">
<c-tree-node key={item.name} node={item}></c-tree-node>
</template>
</div>
</template>
</div>
</template>treeNode.js:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
import { LightningElement, api, track } from 'lwc';
export default class TreeNode extends LightningElement {
@api node;
@track isExpanded = false;
get hasChildren() {
return this.node.items && this.node.items.length > 0;
}
get iconName() {
return this.isExpanded ? 'utility:chevronup' : 'utility:chevrondown';
}
connectedCallback() {
this.isExpanded = this.node.expanded || false;
}
toggleNode() {
this.isExpanded = !this.isExpanded;
}
}treeNode.css:
.tree-node {
margin-left: 20px;
}
.node-header {
display: flex;
align-items: center;
cursor: pointer;
padding: 5px;
}
.node-label {
margin-left: 5px;
}
.node-children {
padding-left: 10px;
}接下来，创建一个父组件，例如 treeView，用于接收 JSON 数据并渲染根节点。
treeView.html:
<template>
<div class="tree-view">
<template for:each={treeData} for:item="item">
<c-tree-node key={item.name} node={item}></c-tree-node>
</template>
</div>
</template>treeView.js:
import { LightningElement, api } from 'lwc';
export default class TreeView extends LightningElement {
@api treeData;
connectedCallback() {
// 可以选择在此处处理数据，例如从 Apex 获取
// this.treeData = this.getSampleData();
}
getSampleData() {
return [
{
"label": "Lauren Boyle",
"name": "Lauren Boyle",
"expanded": true,
"items": [
{
"label": "Banoth Srikanth",
"name": "Banoth Srikanth",
"expanded": true,
"items": [
{
"label": "Stella Pavlova",
"name": "Stella Pavlova",
"expanded": true,
"items": []
}
]
},
{
"label": "Srikanth",
"name": "Srikanth",
"expanded": true,
"items": []
}
]
}
];
}
}treeView.js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__AppPage, lightning__RecordPage, lightning__HomePage">
<property name="treeData" type="String" label="Tree Data (JSON)" description="JSON data for the tree view" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>代码解释
-
treeNode 组件:
- @api node: 接收来自父组件的 JSON 节点数据。
- @track isExpanded: 跟踪节点是否展开的状态。
- hasChildren: 计算属性，判断节点是否有子节点。
- iconName: 计算属性，根据 isExpanded 状态显示不同的图标。
- toggleNode(): 切换节点的展开/折叠状态。
-
treeView 组件:
- @api treeData: 接收外部传入的 JSON 数据，用于构建树形结构。
- getSampleData(): 提供示例数据，方便测试和演示。实际应用中，可以从 Apex 类获取数据。
- 在treeView.js-meta.xml中，treeData 被定义为属性，可以在 Lightning App Builder 中配置。
使用方法
- 将 treeNode 和 treeView 组件部署到 Salesforce 组织。
- 在 Lightning App Builder 中，将 treeView 组件添加到页面。
- 配置 treeData 属性，提供 JSON 数据。可以直接输入 JSON 字符串，也可以通过 Apex 类获取数据并传递给组件。
注意事项
- 性能优化: 对于大型数据集，递归渲染可能会影响性能。可以考虑使用虚拟化技术或懒加载来优化性能。
- 样式定制: 根据需求，可以自定义 CSS 样式，以满足不同的视觉效果。
- 数据处理: 在实际应用中，可能需要对 JSON 数据进行预处理，例如排序、过滤等。
- 错误处理: 添加错误处理机制，以处理无效的 JSON 数据或网络请求失败等情况。
总结
通过本文的介绍，您已经了解了如何使用 LWC 自定义组件，结合递归方法，实现一个可折叠的树形结构，而无需依赖 lightning-tree 组件。这种方法具有更高的灵活性和可定制性，可以满足各种复杂的业务需求。在实际开发中，可以根据具体情况进行调整和优化，以达到最佳的性能和用户体验。
