当前位置：首页 > VUE

vue 树形菜单实现

2026-01-19 07:47:43VUE

Vue 树形菜单实现方法

递归组件实现

递归组件是Vue中实现树形结构的常见方式。通过组件调用自身实现无限层级嵌套。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.label }}
      <tree-menu v-if="item.children" :treeData="item.children"></tree-menu>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以考虑使用成熟的第三方组件库：

element-ui的el-tree
ant-design-vue的a-tree
vuetify的v-treeview

以element-ui为例：

vue 树形菜单实现

<el-tree
  :data="treeData"
  :props="defaultProps"
  @node-click="handleNodeClick">
</el-tree>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '一级',
        children: [{
          label: '二级'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

动态加载数据

对于大数据量场景，可以实现懒加载：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '根节点' }])
  }
  if (node.level > 3) return resolve([])

  setTimeout(() => {
    const data = Array.from({ length: 5 }).map((_, i) => ({
      name: `节点${node.level}-${i}`,
      leaf: node.level >= 2
    }))
    resolve(data)
  }, 500)
}

自定义样式和交互

通过CSS可以自定义树形菜单的外观：

vue 树形菜单实现

.tree-node {
  padding: 5px 10px;
  cursor: pointer;
}
.tree-node:hover {
  background-color: #f5f5f5;
}
.tree-children {
  padding-left: 20px;
}

功能增强

实现常见功能如：

复选框选择
节点展开/折叠
拖拽排序
搜索过滤
右键菜单

示例实现搜索过滤：

filterNode(value, data) {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}

性能优化

对于大型树结构：

使用虚拟滚动
实现节点懒加载
避免不必要的重新渲染

export default {
  shouldComponentUpdate(nextProps) {
    return !shallowEqual(this.props.node, nextProps.node)
  }
}

标签: 菜单 vue

分享给朋友：

vue实现放大效果

使用 CSS transform 实现放大效果在 Vue 中实现放大效果可以通过 CSS 的 transform: scale() 属性。这种方法简单高效，适合大多数交互场景。定义一个 CSS…

vue搜索过后实现分页

Vue 实现搜索后分页功能数据绑定与搜索逻辑在 Vue 组件中定义必要的数据属性： data() { return { searchQuery: '', currentPa…

vue实现生成二维码

使用qrcode.vue库生成二维码安装qrcode.vue库： npm install qrcode.vue --save 在Vue组件中使用： <template> <…

vue优秀实现

Vue.js 优秀实现方法响应式数据管理使用 Vue 的 ref 和 reactive 处理基础类型和对象类型数据，结合 computed 计算属性优化渲染性能。对于复杂状态，推荐 Pinia 替…

vue实现贴图

Vue 实现贴图功能在Vue中实现贴图功能通常涉及将图片动态添加到指定位置或元素上。以下是几种常见实现方式：使用v-bind动态绑定图片通过数据驱动的方式动态更换图片源： <tem…

实现 vue ssr

Vue SSR 实现方法 Vue SSR（Server-Side Rendering）通过服务器端渲染 Vue 应用，提升首屏加载速度和 SEO 友好性。以下是核心实现方法：基础配置安装必要依赖…

vue 树形菜单实现