如何在LWC中不使用lightning-tree展示层级JSON为树形结构

要实现自定义树形结构，核心思路是利用组件递归处理嵌套层级的数据，下面是完整可落地的实现步骤：

1. 组件拆分 #

我们需要两个组件配合：

• 主组件：负责加载和传递树形数据源
• 树形节点组件：递归渲染每个节点及其子节点

2. 主组件（customTree） #

HTML 代码 #

<template>
    <div class="tree-container">
        <!-- 调用树形节点组件，传入根节点数据 -->
        <c-tree-node node={treeData}></c-tree-node>
    </div>
</template>

JS 代码 #

import { LightningElement } from 'lwc';

export default class CustomTree extends LightningElement {
    // 你的树形数据源
    treeData = [
        {
            "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": []
                }
            ]
        }
    ];
}

3. 树形节点组件（treeNode） #

这是实现核心，通过自身递归调用渲染子节点：

HTML 代码 #

<template>
    <!-- 遍历当前层级的所有节点 -->
    <template for:each={node} for:item="item">
        <div key={item.name} class="tree-node">
            <!-- 仅当有子节点时显示展开/收起图标 -->
            <template if:true={item.items.length}>
                <lightning-icon 
                    class="tree-icon"
                    icon-name={getIconName(item.expanded)} 
                    onclick={toggleExpand} 
                    data-name={item.name}
                    alternative-text={item.expanded ? '收起' : '展开'}>
                </lightning-icon>
            </template>
            <!-- 节点标签文本 -->
            <span class="node-label">{item.label}</span>
            <!-- 递归渲染子节点（仅当节点处于展开状态时显示） -->
            <template if:true={item.expanded}>
                <div class="child-nodes">
                    <c-tree-node node={item.items}></c-tree-node>
                </div>
            </template>
        </div>
    </template>
</template>

JS 代码 #

import { LightningElement, api } from 'lwc';

export default class TreeNode extends LightningElement {
    // 接收父组件传递的当前层级节点数据
    @api node;

    // 根据展开状态返回对应图标
    getIconName(expanded) {
        return expanded ? 'utility:chevrondown' : 'utility:chevronright';
    }

    // 切换节点展开/收起状态
    toggleExpand(event) {
        const targetName = event.target.dataset.name;
        // 递归查找目标节点并切换状态
        const targetNode = this.findNodeByName(this.node, targetName);
        if (targetNode) {
            targetNode.expanded = !targetNode.expanded;
        }
    }

    // 递归遍历节点树，根据name查找目标节点
    findNodeByName(nodes, name) {
        for (const node of nodes) {
            if (node.name === name) return node;
            if (node.items.length) {
                const found = this.findNodeByName(node.items, name);
                if (found) return found;
            }
        }
        return null;
    }
}

CSS 代码（美化树形结构） #

.tree-node {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.tree-icon {
    cursor: pointer;
    margin-right: 4px;
    width: 16px;
    height: 16px;
}

.node-label {
    cursor: default;
}

.child-nodes {
    margin-left: 20px;
    margin-top: 4px;
}

实现说明 #

• 递归渲染：树形节点组件通过自身调用，自动适配任意层级的嵌套数据
• 状态切换：修改节点的expanded属性触发LWC响应式渲染，自动显示/隐藏子节点
• 样式定制：通过CSS可轻松调整缩进、颜色、hover效果等，完全自定义树形外观

内容的提问来源于stack exchange，提问作者bnthsrikanth