vue中使用element-ui实现导航菜单

待我称王封你为后i 2023-06-11 07:26 73阅读 0赞

在main.js中引入

import ElementUI from 'element-ui';
    Vue.use(ElementUI);`

组件内代码为:

<template>
          <el-col :span="12">
            <el-menu
              default-active
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
              </el-menu-item>
    
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>数据列表</span>
                </template>
                <el-menu-item index="1-3">用户列表</el-menu-item>
                <el-menu-item index="1-3">商家列表</el-menu-item>
                <el-menu-item index="1-3">食品列表</el-menu-item>
                <el-menu-item index="1-3">订单列表</el-menu-item>
                <el-menu-item index="1-3">管理员列表</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-plus"></i>
                  <span>添加数据</span>
                </template>
                <el-menu-item index="1-3">添加商铺</el-menu-item>
                <el-menu-item index="1-3">添加商品</el-menu-item>
              </el-submenu>
    
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-star-on"></i>
                  <span>图表</span>
                </template>
                <el-menu-item index="1-3">用户分布</el-menu-item>
              </el-submenu>
    
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-edit"></i>
                  <span>编辑</span>
                </template>
                <el-menu-item index="1-3">文本编辑</el-menu-item>
              </el-submenu>
    
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>设置</span>
                </template>
                <el-menu-item index="1-3">管理员设置</el-menu-item>
              </el-submenu>
    
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-warning"></i>
                  <span>说明</span>
                </template>
                <el-menu-item index="1-3">说明</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
           </template>
         <script>
        export default {
            data() {
               return {
                 isCollapse: true
        };
      },
           methods: {
              handleOpen(key, keyPath) {
              window.console.log(key, keyPath);
        },
             handleClose(key, keyPath) {
                window.console.log(key, keyPath);
        }
      }
    };
    </script>

效果图如下：

![未展开状态][2019102918490228.png]

![展开状态][20191029184935792.png]

[2019102918490228.png]: /images/20230531/615053a3a6024621b377db2378a50236.png
[20191029184935792.png]: /images/20230531/22a32aaf09704e3cbd691dced901510d.png