vue配合element实现三级菜单

在Vue中搭配Element UI实现三级菜单，可以使用el-menu组件。以下是一个简单的三级菜单实现示例：

<template>
  <el-menu
    :default-openeds="defaultOpeneds"
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-submenu index="1">
      <template slot="title">导航一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
      <el-submenu index="1-3">
        <template slot="title">选项3</template>
        <el-menu-item index="1-3-1">选项3-1</el-menu-item>
        <el-menu-item index="1-3-2">选项3-2</el-menu-item>
      </el-submenu>
    </el-submenu>
    <!-- 重复上述结构以创建更多的级别 -->
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      defaultOpeneds: ['1'],
      defaultActive: '1-1',
    };
  },
  methods: {
    handleOpen(index, indexPath) {
      // 可以在这里处理打开菜单项的逻辑
      console.log('open: ', index, indexPath);
    },
    handleClose(index, indexPath) {
      // 可以在这里处理关闭菜单项的逻辑
      console.log('close: ', index, indexPath);
    },
  },
};
</script>

在这个例子中，我们使用了el-submenu和el-menu-item组件来构建三级菜单。index属性用于标识每个菜单项，default-openeds和default-active分别用于设置默认展开的子菜单和默认激活的菜单项。handleOpen和handleClose方法用于处理菜单项打开和关闭时的逻辑。

确保你已经安装了Element UI依赖，并在你的Vue项目中正确引入。

npm install element-ui --save

在你的main.js或相应的入口文件中：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);