本文介绍如何在 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:
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 组件。这种方法具有更高的灵活性和可定制性，可以满足各种复杂的业务需求。在实际开发中，可以根据具体情况进行调整和优化，以达到最佳的性能和用户体验。
css html js node.js json node app 懒加载 igs json css html xml 字符串 递归 JS 对象 性能优化 虚拟化