vue+elementUI侧边栏的实现

已于 2022-07-21 19:58:00 修改
阅读量8.9k 收藏 18
点赞数 5
分类专栏： vue+elementUI学习 文章标签： 前端 vue.js
于 2022-03-19 20:49:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39792789/article/details/123600886
版权

需求：无

实现的功能：

利用elementUI实现侧边栏功能，为了更好的展示菜单内容

使用版本：
        nodejs v14.16.1
        vue 2.9.6
        npm 6.14.12
        webpack 3.12.0
        node-sass  4.14.1
        sass-loader 7.1.0

 环境问题见往期文章

使用的技术：

①NavMenu导航菜单的使用

②Vue父组件向子组件传值问题

③NavMenu结合递归实现任意个数的子菜单（其中出现样式错位问题，如有好的请求方式请留言，多谢各位大佬）

侧边栏实现流程图：

最低0.47元/天 解锁文章
任天君
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
Vue+ELementUI主页布局----侧边栏布局（el-aside）
热门推荐
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
引领前端布局新风尚：Vue 3 自定义侧边栏菜单组件 - vue-sidebar-menu
最新发布
gitblog_00046的博客
05-19 1388
引领前端布局新风尚：Vue 3 自定义侧边栏菜单组件 - vue-sidebar-menu 项目地址:https://gitcode.com/yaminncco/vue-sidebar-menu 在构建现代网页应用时，一个优雅的导航系统是不可或缺的组成部分。今天，我们向您隆重推出【vue-sidebar-menu】——一款专为Vue 3设计的侧边栏菜单组件，兼容vue-router，并提供多种自定...
以element ui 的标签页与侧边导航联动的vue功能
qq_56511517的博客
07-07 979
思路是遍历导航栏数组，在数组中有标题，图标，路由地址等信息，与路由信息相对应，点击每个导航项目时会将该条数组项目添加到store里，删除则反之。这主要是一级路由的列表，那么其他页面的标签我是通过监听路由，在里面包不包含，不包含就从当前的路由元信息里取。在整体布局layout页面中，测栏,其中最重要的两个参数default-active设为$router.path,则它会根据路由来激活样式，index设为遍历数组的url,跟路由地址一一匹配。layout.vue文件。tags.vue文件。
element ui NavMenu 实现侧边栏导航菜单
Igiveufireworks的博客
05-08 1955
使用Element UI 的 Container 布局容器和NavMenu导航菜单组件，使用router-view存放二级路由出口。根据v-for遍历菜单参数，渲染导航栏。
＜ elementUi 中 封装 NavMenu 导航菜单，实现单页面侧边导航栏 ＞
一个平平无奇的技术宅
04-20 7445
在 Vue + elementUi 开发中，在大部分后台管理系统都会选择实现 “ 单页面 ” 应用，简称：`SPA`。但是实现单页面应用，页面布局显然很重要，在开发中，有时候需要，自己编写一个 单页面导航栏。本篇文章将简单展示！ 案例仅供参考！ ...
ElementUI之首页导航&左侧菜单
theHider的博客
07-24 2501
为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。创建。
vue+elementUI管理系统页面源代码
02-12
4. `components`目录：存储可复用的自定义组件，比如通用的头部、侧边栏等。 5. `views`目录：包含具体的业务页面，每个子目录或文件对应一个路由路径。 6. `static`目录：用于存放静态资源，如图片、字体文件等，...
如何利用vue+vue-router+elementUI实现简易通讯录
10-17
在这个例子中，它可能包含一个侧边栏菜单，通过`v-for`指令遍历数据来生成菜单项，这些菜单项与Vue Router的路由配置对应，点击时会跳转到相应的通讯录页面。 通讯录功能的具体实现，可以通过创建多个Vue组件来完成...
vue+elementUI管理系统，页面源代码
11-10
在构建这个管理系统时，`element-ui` 提供的导航栏组件可以帮助快速搭建出美观的侧边栏或顶部导航，通过调整组件的属性和事件，可以实现多级菜单、权限控制等功能。此外，还可以结合Vue Router的`beforeEach`守卫，...
vue-secondMenu-test:Vue + elementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
05-10
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏 项目实现了登录功能，一二级菜单联动选择展示不同的主体内容部分，封装了 axios 请求库，还配置了管理员和普通用户的权限区分。 运行项目 npm ...
Vue+ElementUI的后台管理系统框架
12-14
4. **搭建布局**：使用Element UI的Layout组件构建基本的后台布局，如头部、侧边栏、内容区等。 5. **实现登录注册**：创建登录和注册页面，集成Element UI的表单组件。 6. **构建功能模块**：根据业务需求，利用...
Element-UI侧边导航栏切换展示不同的右侧主体内容
欢迎来到长风沛雨的博客
03-11 3582
在用element做侧边栏遇到的问题，如果给每个按钮绑定一个值去用if判断有点麻烦了。看了下文档，是给 这个标签来一个router的属性。控制台就会报错它是一个字符串不是布尔值，但是它的路由是生效的= =这里是给User加了两个子组件，然后把子组件给侧边栏绑路由。那么为true的时候就是开启这个导航栏的路由了。把每个导航索引的路由绑成不一样的就好了思密达。但是直接给每个选项用router是会报错的。点击其他的，点击后的变色效果就同时生效。这个时候点了它就出来了，但是~
vue2+element-ui,el-aside侧边栏容器收缩与展开
im_api的博客
02-16 6572
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
超详细的vue结合ElementUI实现头部导航栏进行页面跳转
qq_48961214的博客
04-24 7751
vue中实现顶部栏路由跳转
vue移动端时弹出侧边抽屉菜单
06-16 1703
移动端时弹出抽屉，如下： 控制抽屉显隐： 由于上面使用了hidden-sm-and-up样式，该样式需要在main.js中引入display.css，如下： 更多样式参考：elementUI响应式隐藏元素_~疆的博客-CSDN博客_element ui 隐藏元素main.js中引入使用类名https://blog.csdn.net/qq_40323256/article/details/125178963由于还使用了perfect-scrollbar组件，故还需要下载该组件，参考
vue/element-ui/router---后台管理系统主页面---一个侧边栏与可配置的tab标签栏
Anitadu的博客
05-19 3574
放上效果图 主要使用了element-ui的NavMenu 导航菜单与Tabs 标签页与vue-router实现了此效果。 <template> <el-row class="tac" type="flex"> <el-col :span="12"> <h5>MYtest</h5> <el-menu class="el-menu-vertical-demo" @open="handleOpen" @cl
element侧边导航高级技巧：子菜单高亮如何让父菜单也高亮
Shids_的博客
08-10 3952
element侧边导航高级技巧：子菜单高亮如何让父菜单也高亮
vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏
xcjhxh的博客
03-02 3914
vue后台项目左侧菜单栏配合element-ui中tag标签实现多标签页导航栏！
vue+elementui侧边栏
08-28
Vue ElementUI提供了一个非常方便的侧边栏组件，可以用于创建响应式的侧边导航栏。 首先，你需要确保已经正确安装了Vue和ElementUI，并在你的项目中引入了相关的依赖。 接下来，你可以在你的Vue组件中使用`el-menu`和`el-menu-item`来创建侧边栏。下面是一个简单的示例： ```vue <template> <div> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu-item index="1">选项1</el-menu-item> <el-menu-item index="2">选项2</el-menu-item> <el-menu-item index="3">选项3</el-menu-item> </el-menu> </div> </template> <script> export default { data() { return { activeIndex: '1' // 默认选中的菜单项 }; }, methods: { handleSelect(index) { this.activeIndex = index; // 处理菜单项的选择事件 } } }; </script> <style scoped> /* 可自定义样式 */ </style> ``` 在上面的示例中，我们使用了`el-menu`来创建一个垂直的侧边栏导航。每个菜单项使用`el-menu-item`来表示，并通过设置`index`属性来标识每个菜单项。 你还可以添加更多的菜单项，并使用`default-active`属性来设置默认选中的菜单项。在`handleSelect`方法中，可以处理菜单项的选择事件。 当然，你也可以根据自己的需求自定义侧边栏的样式，并根据具体的业务逻辑进行相应的调整。 希望对你有所帮助！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值