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

最新推荐文章于 2024-06-19 15:13:44 发布
最新推荐文章于 2024-06-19 15:13:44 发布
阅读量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-element-admin 菜单标签失效的解决方式
10-16
在`vue-element-admin`中，通常会将其置于`Layout`组件内，以便在切换子路由时保持公共部分的状态，例如侧边菜单的选中状态。 总之，解决`vue-element-admin`菜单标签失效的问题主要在于正确设置路由的`name`属性和...
vue + element 开发项目 浅总结
weixin_42574985的博客
11-07 1028
1.在使用el-aside el-menu侧边栏进行路由跳转的时候，多页面最好用一个公共的侧边栏，使用route.push跳转，如果不使用路由跳转而是直接在el-menu-item的index里进行路由名的跳转，会导致切换页面的时候反复create页面，如果是在一个后台页面里获取到ticket，有可能会导致ticket赋值为空。小白第一次做的东西，先根据代码进行浅浅的一波总结，后面想着再根据浏览器的历史记录搜的一些问题再总结一下。其实最主要的大问题还在于图片的上传，详情页的图片替换，视频的上传等。
记一次动态获取 vue-element-admin 侧边栏菜单
qq_22832075的博客
04-01 1106
一次在项目中需要动态获取侧边栏菜单。 我使用了一种简单粗暴的方法。 修改侧边栏组件，这里存放的就是侧边栏样式。 将index.vue备份然后删除里面的内容，修改为下面的，这样每次请求就会发送请求获取相应的菜单栏然后遍历出来。 <template> <div class="cen"> <el-menu router class="el-menu-vertical-demo" :collapse="isCollapse"
element-ui中el-menu在特定条件下 点击菜单项不切换页面 禁止选中
最新发布
weixin_43443339的博客
06-19 246
然后设置下图defaultActive&activeIndex即可。
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-
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
热门推荐
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
vue项目 使用Element-UI的NavMenu 遍历路由表生成导航菜单与点击页面路由时导航菜单失去高亮显示效果
幽冥雪羽的博客
11-04 5279
介绍：目前使用的路由表是三级路由表，文章中使用Element-UI动态生成导航栏可以有N级路由嵌套，但是事实上不会有那么多级路由，但是为了方便还是一次性写好，使用时就是复制文件就好 虚拟路由表: const RouterMap =[ { path: '/login', component: () => import('@/views/login'), hidden: true }, { ...
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
Vue.js 点击按钮显示/隐藏内容
06-21
如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为false就设置为true(this.show = !this.show)即可。
elementui步骤条自定义点击跳转页面，返回步骤条保留信息
qq_52959651的博客
09-02 5207
先看效果图 如果没有点击下一步，步骤条将不可点击，点击下一步可返回上一步，步骤条也可以来回点击跳转页面，还可以转到其他页面，回来后步骤条依然没有改变，保留状态，这个是我自己想的方法，可能有一些不太对，但是我这边大致功能都能实现，如果有什么问题可以指出。 代码 这是我的目录结构，现实中根据你项目需求来 91.vue(起名不规范，这是我专门的测试页面) 步骤条单独是一个组件 <template> <div class="main"> <el-button typ
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法
QC班长的博客
01-25 8226
目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的SvgIcon图标，官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。 下面是在main.js中全局引入图标的方法： import {createApp} from 'vue' import App from './App..
el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面
m0_74099927的博客
04-19 234
el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面。如图所示多写了一个，就会导致该有的页面显示不出来。
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中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容
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(), 或者覆盖整个数组 总结: 改变原
vue+element UI侧边菜单如何渲染多级菜单
06-08
要渲染多级菜单，可以使用 Element UI 的 Menu 组件和 Submenu 组件。首先，你需要定义一个菜单数据源，包含多级菜单的信息。例如： ```javascript menuData: [ { name: 'Dashboard', icon: 'el-icon-s-home', ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值