jdk1.8+vue elementui实现多级菜单功能

下面我将详细讲解“jdk1.8+vue elementui 实现多级菜单功能”的攻略。

一、准备工作

首先需要安装jdk1.8及以上版本和vue-cli的脚手架工具，具体可以参考相关官方文档。

然后需要在vue项目中安装element-ui组件库，可以使用npm命令进行安装，示例代码如下：

npm install element-ui --save

在main.js文件中引入element-ui的样式文件和组件：

import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

二、实现多级菜单功能

1. 前端路由配置

在router文件夹下的index.js文件中，配置多级路由，示例如下：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  }, 
  {
    path: '/about',
    component: About,
    name: 'About',
    children: [
      {
        path: '/',
        name: 'AboutIndex',
        component: AboutIndex,
      },
      {
        path: 'history',
        name: 'History',
        component: History,
      },
      {
        path: 'culture',
        name: 'Culture',
        component: Culture,
      },
    ],
  },
];

通过配置路由，实现多级嵌套的菜单展示。

2. 前端菜单实现

在App.vue文件中使用element-ui的Menu组件来实现菜单的展示，示例代码如下：

<template>
  <div id="app">
    <el-menu class="el-menu-demo" mode="horizontal" :default-active="$route.path">
      <el-menu-item v-for="(item, index) in menu" :key="item.path" :index="item.path" @click="handleMenu(index)">
        {{ item.label }}
      </el-menu-item>
    </el-menu>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      menu: [
        {
          label: '首页',
          path: '/',
        },
        {
          label: '关于',
          path: '/about',
          children: [
            {
              label: '公司介绍',
              path: '/about',
            },
            {
              label: '公司历史',
              path: '/about/history',
            },
            {
              label: '公司文化',
              path: '/about/culture',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleMenu(index) {
      this.$router.push(index);
    },
  },
};
</script>

通过使用element-ui的Menu组件和路由配置，实现了多级菜单的展示和跳转功能。

三、示例说明

1. 嵌套路由示例

以公司介绍和公司历史为例，实现嵌套路由效果。在About.vue文件中添加以下代码：

<template>
  <div class="about">
    <el-menu class="el-menu-demo" mode="vertical" :default-active="$route.path">
      <el-submenu v-for="(sub, index) in submenu" :key="sub.path" :index="sub.path">
        <template slot="title">{{ sub.label }}</template>
        <el-menu-item v-for="(item, index) in sub.children" :key="item.path" :index="item.path" @click="handleMenu(item.path)">
          {{ item.label }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="about-content">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      submenu: [
        {
          label: '公司介绍',
          path: '/about',
          children: [
            {
              label: '公司简介',
              path: '/about',
            },
            {
              label: '公司文化',
              path: '/about/culture',
            },
          ],
        },
        {
          label: '公司历史',
          path: '/about/history',
          children: [
            {
              label: '公司发展史',
              path: '/about/history',
            },
            {
              label: '历史事件',
              path: '/about/history/event',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleMenu(path) {
      this.$router.push(path);
    },
  },
};
</script>

通过使用element-ui的SubMenu子组件和路由配置，实现了多级嵌套路由的菜单和面包屑导航功能。

2. 动态生成菜单示例

在业务场景中，有时需要根据后端接口返回的数据动态生成菜单。在这种情况下，我们可以在调用接口获取到数据之后，根据数据来动态生成菜单。示例代码如下：

<template>
  <div class="app-container">
    <el-aside>
      <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" unique-opened>
        <el-submenu v-for="(item, index) in menu" :key="item.id" :index="item.id">
          <template slot="title">
            <i :class="`el-icon-${item.icon}`"></i>
            <span v-text="item.name" />
          </template>
          <el-menu-item v-for="(childItem, childIndex) in item.children" :key="childIndex" :index="`${item.id}-${childItem.id}`">
            <span slot="title" @click="handleMenuClick(childItem)">{{childItem.name}}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          id: 1,
          name: '首页',
          icon: 's-home',
          children: []
        },
        {
          id: 2,
          name: '系统管理',
          icon: 's-tools',
          children: []
        }
      ]
    }
  },
  mounted() {
    // TODO: 调用后端接口获取菜单
    const menuData = [
      {
        id: 1,
        name: '首页',
        icon: 's-home',
        children: []
      },
      {
        id: 2,
        name: '系统管理',
        icon: 's-tools',
        children: [
          {
            id: 21,
            parentId: 2,
            name: '用户管理',
            url: '/user',
            icon: '',
            children: []
          },
          {
            id: 22,
            parentId: 2,
            name: '角色管理',
            url: '/role',
            icon: '',
            children: []
          }
        ]
      }
    ];
    this.menu = menuData;
  },
  methods: {
    handleMenuClick(item) {
      if (item.children.length) return;
      this.$router.push(item.url);
    }
  }
}
</script>

通过调用后端接口获取菜单数据，然后动态生成菜单项和路由，实现了动态生成菜单的功能。

以上就是“jdk1.8+vue elementui 实现多级菜单功能”的完整攻略，希望对你有所帮助。