使用 LWC 自定义组件显示层级 JSON 数据为树形结构-js教程-PHP中文网

使用 LWC 自定义组件显示层级 JSON 数据为树形结构

聖光之護

发布： 2025-09-13 20:24:01

原创

454人浏览过

使用 lwc 自定义组件显示层级 json 数据为树形结构

本文介绍如何在 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:

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

.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 中配置。