vue+element-ui侧边菜单点击显示内容的办法

最新推荐文章于 2023-10-23 15:57:11 发布
最新推荐文章于 2023-10-23 15:57:11 发布
阅读量6.1k 收藏 3
点赞数
文章标签： vue element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cathei/article/details/103195308
版权

1.设置点击事件，this.$router.push({path: val.path})

 

 

 

2.调用el-menu的select事件

 

 

 

 

 

 

ChericeYang
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue.js 点击按钮显示/隐藏内容
06-21
如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为false就设置为true(this.show = !this.show)即可。
element-ui中el-menu在特定条件下 点击菜单项不切换页面 禁止选中
最新发布
weixin_43443339的博客
06-19 246
然后设置下图defaultActive&activeIndex即可。
vue radio点击按钮控制显式内容
taiguolaotu的博客
06-15 272
【代码】vue radio点击按钮控制显式内容。
element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面
weixin_44990895的博客
05-13 1万+
【代码】element-ui 的 el-menu 菜单实现点击 el-submenu 也可以跳转页面。
element ui左侧菜单栏从后台获取数据
Meditation_Crazy
12-18 4707
前言 菜单栏数据实现从后天获取 实现 代码 <el-menu background-color="#393e46" text-color="#fff"> <el-menu-item :class="getMenuSwitchState?'close':'open'"> <i class="el-icon-position" style="color...
vue-element-admin 菜单标签失效的解决方式
10-16
在`vue-element-admin`中，通常会将其置于`Layout`组件内，以便在切换子路由时保持公共部分的状态，例如侧边菜单的选中状态。 总之，解决`vue-element-admin`菜单标签失效的问题主要在于正确设置路由的`name`属性和...
vue-element-admin-master.zip
12-02
2. **动态路由**：Vue Router 可能被用来根据用户的选择动态调整页面结构，例如，当切换到顶部菜单时，主内容区域可能会与菜单并排显示；而在左侧菜单模式下，菜单可能折叠在侧边。 3. **组件通信**：Vue 的组件...
详解VUE Element-UI多级菜单动态渲染的组件
10-17
主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-demo:一些实用的vue+element组件功能
04-23
侧边菜单栏实现,页面刷新高亮当前页面菜单 demo小组件 1. 组织架构图,树形图 2. 图片旋转 3. 放大镜功能 4. 级联面板应用 5. vue页面打印功能 PDF预览 图形编辑 1. 图形旋转,平移,缩放 2. 页面多个upload上传文件 ...
vue-secondMenu-test:Vue + elementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
05-10
vue-secondMenu-test Vue + ElementUI 后台管理...项目实现了登录功能，一二级菜单联动选择展示不同的主体内容部分，封装了 axios 请求库，还配置了管理员和普通用户的权限区分。 运行项目 npm install npm run dev
elementui+vue 点击子菜单（或刷新）的高亮状态
weixin_44368573的博客
08-29 1161
功能：切换导航时实现菜单的高亮的激活状态； 思路：点击菜单->获取路由地址->存在session中->刷新页面或切换时将session中的值赋值给el-menu中的default-active属性（当前被激活的index） 代码： //结构 <el-menu router :default-active="activePath" active-text-color="pink" :collapse="isCollapse" :collapse-transition="false
vue项目 使用Element-UI的NavMenu 遍历路由表生成导航菜单与点击页面路由时导航菜单失去高亮显示效果
幽冥雪羽的博客
11-04 5279
介绍：目前使用的路由表是三级路由表，文章中使用Element-UI动态生成导航栏可以有N级路由嵌套，但是事实上不会有那么多级路由，但是为了方便还是一次性写好，使用时就是复制文件就好 虚拟路由表: const RouterMap =[ { path: '/login', component: () => import('@/views/login'), hidden: true }, { ...
element 导航菜单
qq_41091678的博客
06-30 368
default-active 当前激活菜单的 index router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> :default-
vue + element 开发项目 浅总结
weixin_42574985的博客
11-07 1028
1.在使用el-aside el-menu侧边栏进行路由跳转的时候，多页面最好用一个公共的侧边栏，使用route.push跳转，如果不使用路由跳转而是直接在el-menu-item的index里进行路由名的跳转，会导致切换页面的时候反复create页面，如果是在一个后台页面里获取到ticket，有可能会导致ticket赋值为空。小白第一次做的东西，先根据代码进行浅浅的一波总结，后面想着再根据浏览器的历史记录搜的一些问题再总结一下。其实最主要的大问题还在于图片的上传，详情页的图片替换，视频的上传等。
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
热门推荐
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
Vue中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容
weixin_44747173的博客
01-23 7256
Vue中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容 代码： <template> <div @click="showBox = false" class="box"> <button @click.stop="showBox=true">点击显示内容</button> <div class="box1" v-show="showBox">我是显示的内容</div> <div
关于vue的学习（四）
qq994849611的博客
02-24 162
这些方法会触发数组改变, v-for会监测到并更新页面 push() pop() shift() unshift() splice() sort() reverse() 这些方法不会触发v-for更新 slice() filter() concat() 注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组 总结: 改变原
在html中引入vue，实现点击不同的按钮有不同的内容显示
qq_70486619的博客
10-23 837
在这个修改后的示例中，我们使用了`v-for`指令来动态渲染按钮，按钮的标签和内容通过`buttons`数组中的数据进行绑定。当点击按钮时，依然会触发`showContent`方法，根据按钮的`content`属性来显示不同的内容。自己写的时候遇到的一点点小困难，做此记录，希望对大家有帮助。
vue+element UI侧边菜单如何渲染多级菜单
06-08
要渲染多级菜单，可以使用 Element UI 的 Menu 组件和 Submenu 组件。首先，你需要定义一个菜单数据源，包含多级菜单的信息。例如： ```javascript menuData: [ { name: 'Dashboard', icon: 'el-icon-s-home', children: [ { name: 'Dashboard 1', path: '/dashboard/1' }, { name: 'Dashboard 2', path: '/dashboard/2' } ] }, { name: 'Products', icon: 'el-icon-menu', children: [ { name: 'Product 1', path: '/product/1' }, { name: 'Product 2', path: '/product/2', children: [ { name: 'Sub Product 1', path: '/product/2/sub/1' }, { name: 'Sub Product 2', path: '/product/2/sub/2' } ] } ] } ] ``` 然后，在你的侧边栏组件中，使用 Menu 和 Submenu 组件来渲染菜单： ```html <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <template v-for="item in menuData"> <el-submenu v-if="item.children" :index="item.name"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{ item.name }}</span> </template> <el-menu-item-group> <template v-for="child in item.children"> <el-menu-item :index="child.path">{{ child.name }}</el-menu-item> <el-submenu v-if="child.children" :index="child.path"> <template slot="title">{{ child.name }}</template> <el-menu-item-group> <template v-for="subChild in child.children"> <el-menu-item :index="subChild.path">{{ subChild.name }}</el-menu-item> </template> </el-menu-item-group> </el-submenu> </template> </el-menu-item-group> </el-submenu> <el-menu-item v-else :index="item.path"> <i :class="item.icon"></i> <span slot="title">{{ item.name }}</span> </el-menu-item> </template> </el-menu> ``` 这样，就可以渲染出多级菜单了。注意，在模板中使用了 v-for 来遍历菜单数据源，并使用 v-if 判断是否存在子菜单。如果存在子菜单，则使用 el-submenu 组件来渲染。如果还存在子菜单，则继续使用 el-submenu 组件递归渲染。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值