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

最新推荐文章于 2024-05-29 00:34:39 发布

艾尔熙德15

最新推荐文章于 2024-05-29 00:34:39 发布

阅读量1k

点赞数

分类专栏： vue-element 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/aecho15/article/details/115355571

版权

vue-element 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<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>