vue-element导航菜单组件，过滤有无子菜单，分别渲染

最新推荐文章于 2025-12-01 19:50:25 发布

原创最新推荐文章于 2025-12-01 19:50:25 发布 · 1.2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript

vue-element 专栏收录该内容

16 篇文章

订阅专栏

这篇博客展示了如何使用Vue.js来动态渲染一个带有子菜单的垂直菜单，并实现菜单项的点击事件处理。通过计算属性`noChildren`和`hanChildren`过滤数据，根据是否有子菜单决定渲染哪种菜单项。在模板中使用`v-for`循环遍历菜单数据，结合`el-menu`、`el-submenu`和`el-menu-item`组件，实现了菜单结构。点击事件`gopath`则用于处理菜单项被选中的行为。

<template>
  <el-menu
    :default-active="title"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="showcollapse"
    unique-opened
  >
  //如果含有子菜单children，渲染hanChildren
    <el-submenu
      :index="item.menuName"
      v-for="item in hanChildren"
      :key="item.menuCode"
    >
      <template slot="title">
        <span>{{ item.menuName }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          @click="gopath(subitem)"
          v-for="(subitem, index) in item.children"
          :key="index"
          :index="subitem.menuName"
          >{{ subitem.menuName }}</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
     //如果没有子菜单children，渲染noChildren
    <el-menu-item
      :index="item.menuName"
      v-for="(item, index) in noChildren"
      :key="index"
      @click="gopath(item)"
    >
      <span>{{ item.menuName }}</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
//过滤数据navList
  computed: {
    noChildren() {
      return this.navList.filter(item => !item.children);
    },
    hanChildren() {
      return this.navList.filter(item => item.children);
    }
  },
  data() {
	    return {
	      navList: [{menuName:'菜单1'},{menuName:'菜单2'},{menuName:'菜单3',children:[{menuName:'菜单3-1'},{menuName:'菜单3-2'}]}],
	      }
      },
      methods:{
	      //菜单点击事件
	      gopath(){}
		}
     }
     </script>