js实现无穷树形菜单

实现无穷树形菜单的方法

使用递归组件是实现无穷树形菜单的核心方法。递归组件能够处理任意深度的树形结构数据，通过组件调用自身的方式渲染嵌套的子菜单。

数据结构设计

树形菜单的数据通常采用嵌套对象的形式，每个节点包含子节点数组。示例数据结构如下：

const treeData = [
  {
    id: 1,
    name: '节点1',
    children: [
      {
        id: 2,
        name: '节点1.1',
        children: []
      }
    ]
  },
  {
    id: 3,
    name: '节点2',
    children: []
  }
]

递归组件实现

创建可递归调用的树形菜单组件：

const TreeNode = {
  name: 'TreeNode',
  props: {
    node: Object
  },
  template: `
    <li>
      <div>{{ node.name }}</div>
      <ul v-if="node.children && node.children.length">
        <tree-node 
          v-for="child in node.children" 
          :key="child.id" 
          :node="child"
        />
      </ul>
    </li>
  `
}

完整示例代码

const app = Vue.createApp({
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '根节点',
          children: [
            {
              id: 2,
              name: '子节点1',
              children: []
            },
            {
              id: 3,
              name: '子节点2',
              children: [
                {
                  id: 4,
                  name: '孙节点',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  },
  template: `
    <ul>
      <tree-node 
        v-for="node in treeData" 
        :key="node.id" 
        :node="node"
      />
    </ul>
  `
})

app.mount('#app')

动态加载子节点

对于大数据量的树形菜单，可采用懒加载方式，当用户展开节点时才加载子节点数据：

methods: {
  async loadChildren(node) {
    if (!node.childrenLoaded && !node.loading) {
      node.loading = true
      const children = await fetchChildren(node.id)
      node.children = children
      node.childrenLoaded = true
      node.loading = false
    }
  }
}

样式优化

添加CSS样式增强用户体验：

ul {
  list-style-type: none;
  padding-left: 20px;
}

li > div {
  cursor: pointer;
  padding: 5px;
}

li > div:hover {
  background-color: #f0f0f0;
}

交互功能扩展

添加展开/折叠功能：

data() {
  return {
    expanded: false
  }
},
methods: {
  toggle() {
    this.expanded = !this.expanded
  }
}

性能优化建议

对于大型树形结构，应考虑虚拟滚动技术，只渲染可视区域内的节点，避免性能问题：

import { VirtualTree } from 'vue-virtual-scroller'

// 使用虚拟滚动组件替换常规渲染

这种实现方式可以处理任意深度的树形结构，具有良好的扩展性和性能表现。