vue中使用element-ui實作導航菜單

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

           

效果圖如下：