当前位置：首页 > JavaScript

js实现无穷树形菜单

2026-01-31 01:34:56JavaScript

实现无穷树形菜单的方法

数据结构设计

使用递归结构存储树形数据，每个节点包含id、label、children等属性。示例数据结构：

const treeData = [
  {
    id: 1,
    label: '节点1',
    children: [
      {
        id: 2,
        label: '子节点1',
        children: [] 
      }
    ]
  }
]

递归组件实现

通过递归组件渲染无限层级树形结构。Vue实现示例：

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.label }}
      <TreeMenu v-if="node.children.length" :treeData="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: ['treeData']
}
</script>

动态加载子节点

实现懒加载功能，当展开节点时异步加载子节点数据：

function loadChildren(parentId) {
  return fetch(`/api/nodes?parentId=${parentId}`)
    .then(res => res.json())
}

交互功能实现

添加展开/折叠功能，通过CSS控制显示状态：

data() {
  return {
    expanded: false
  }
},
methods: {
  toggle() {
    this.expanded = !this.expanded
    if(this.expanded && !this.node.children.length) {
      loadChildren(this.node.id).then(children => {
        this.node.children = children
      })
    }
  }
}

性能优化

对于大型树结构实现虚拟滚动，只渲染可视区域内的节点：

// 使用vue-virtual-scroll-list等库
<VirtualList :size="30" :remain="10">
  <TreeItem v-for="item in list" :key="item.id"/>
</VirtualList>

样式处理

使用CSS实现缩进和连接线效果：

.tree-node {
  padding-left: 20px;
  position: relative;
}
.tree-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ddd;
}

完整实现示例

React函数组件实现方案：

js实现无穷树形菜单

function TreeNode({ node }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <li>
      <div onClick={() => setExpanded(!expanded)}>
        {node.children.length ? (expanded ? '▼' : '▶') : '•'} {node.label}
      </div>
      {expanded && node.children.length > 0 && (
        <ul>
          {node.children.map(child => (
            <TreeNode key={child.id} node={child} />
          ))}
        </ul>
      )}
    </li>
  );
}