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

最新推荐文章于 2024-09-16 19:54:33 发布

一又十七

最新推荐文章于 2024-09-16 19:54:33 发布

阅读量5.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45387568/article/details/102806249

版权

本文介绍了如何在Vue项目中结合Element-UI库创建导航菜单。通过在main.js中引入必要的组件，并在组件内编写相关代码，成功实现了功能。文章提供了实际操作的截图展示效果。

摘要由CSDN通过智能技术生成

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