【前端02】解决使用element-plus中el-menu点击不能一直高亮

Noyade

于 2024-04-10 09:21:46 发布

阅读量156

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Noyade/article/details/137581518

版权

因为使用到了router。
直接设置
const route=useRoute()
:default-active=“route.path”

<el-menu class="el-menu-demo" mode="horizontal"  :default-active="route.path" :ellipsis="false" unique-opened="true" active-text-color="#ffd04b"
    router>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Noyade

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【前端02】解决使用element-plus中el-menu点击不能一直高亮

因为使用到了router。
复制链接

扫一扫

element plus 中menu菜单项不高亮

m0_51607474的博客

05-29

695

动态添加类名，当跳转路由的名字与路由的名字相同时，给class添加is-active类名。

element NavMenu导航菜单禁止高亮

NancyFyn的博客

04-07

853

切换二级菜单，禁止菜单高亮。

1 条评论您还未登录，请先登录后发表或查看评论

elementUI的Menu组件高亮问题并保存所选高亮

qq_44906497的博客

09-21

1005

3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。

Vue 3项目中结合Element Plus的＜el-menu＞和CSS3创建锚点，以实现点击菜单项时平滑滚动到对应的锚点目标

最新发布

m0_67624022的博客

03-22

1619

确保已经安装了Element Plus库。可以使用npm或者yarn进行安装，具体步骤与上文提到的相同。方法来处理菜单项的选择事件，使得点击菜单项时能够平滑滚动到对应的锚点目标。在你的Vue 3项目中引入所需的Element Plus组件和样式。值对应，这样点击菜单项时页面就会平滑滚动到相应的锚点目标位置。属性为对应的锚点目标的id。在页面中添加与菜单项。

关于vue使用Element Plus框架的时候，使用Menu菜单的时候，遇到了一些问题，解决了

weixin_46212682的博客

12-14

5391

关于vue使用Element Plus框架的时候，使用Menu菜单的时候，遇到了一些问题，解决了

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

10-16

在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...

element-plus-2.2.12 本地资源文件

08-01

element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。资源适用于离线开发，内网使用。（本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）

Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

06-15

重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。需要安装依赖：npm i -S ...

element-plus(element-plus@2.5.5) 本地离线资源

02-05

element-plus@2.5.5 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element-plus@2.5.5/dist /npm/element-plus@2.5.5/es /npm/element-plus@2.5.5/lib /npm/element-...

element-plus离线文档

05-07

Element Plus 是一个基于 Vue 3 的开源组件库，它提供了丰富的 UI 组件，用于构建现代 Web 应用程序。...通过深入理解和实践文档中的示例，开发者可以更好地掌握 Element Plus 的使用，提升项目开发的效率和质量。

El-Element-Plus 菜单相关问题

weixin_47239456的博客

06-30

360

el-menu收缩问题

element-plus中menu的基本知识点

m0_52518047的博客

11-24

6523

（1）menu组件要有路由导航效果；（2）在页面刷新的时候，选中的导航要保持展开以及高亮状态；

Vue3+ElementPlus el-menu子菜单设置父菜单选中技巧

柒柒兮的博客

08-02

3124

第一步在路由中设置 { path: "/aView", name: "aView", meta: { title: '父菜单' }, component: () => import( "../views/aView.vue"), }, { path: "/bView", name: "bView", meta: { title: '子菜单', activeMenu:'aView'//注意这里的设置,设置的是父菜单的pathName }, component: () =&

解决element-plus的menu菜单组件无限极多次使用，切换一级菜单后无法高亮问题

望南

05-06

2843

1 页面结构顶部为一级菜单，左侧为无限极二级菜单问题：当切换一级菜单之后，菜单只有在刷新之后才能有高亮属性，检查获取到的route.path是没有问题的，就是渲染不上，所以把问题定位到父组件与子组件的渲染和传值问题上，解决思路 1、在子组件上加一个v-if控制` <LeftBar v-if="show" :menuList="LeftBarMenu" /> 2、监听父组件所传值的改变 watch( () => state.LeftBarMenu,

vue3使用Element-plus Tabs 标签页的点击事件

前端之行，任重道远！

08-21

1万+

<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label=

关于Element-UI中el-menu，则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题

热门推荐

sinat_35092057的博客

05-16

2万+

关于Element-UI中el-menu，则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题因为这是element中两个不相关联的组件，无法通过组件内的方法去实现这个需求。我采用vuex状态机来实现。为三个导航栏绑定点击事件，点击的时候去改变状态机里的state数据。然后再相应的页面里，调用updated狗子函数，当页面更新...

vue3 element plus NavMenu 导航无法选中（同级页面跳转，导航无法高亮）

xiaomanonyo的博客

03-05

2121

需求：导航选中的是公司信息，当跳转到公司信息编辑的时候，上面的导航公司信息还是要选中状态，点击导航，回到信息展示页面，下面是我的路由在vue2里面使用element ui，像下面这样做是可以的动态给el-menu-item的index赋值，获取当前页面的路径，动态传给index 但是在vue3里面用的element plus 这样用不行了，只有在首次刷新的时候（或者页面刚跳转进去的时候）给index赋的值有效，后面点击之后，index的值好像并没有改变，我打印出来看了一...

element-plus刷新后菜单不选中不高亮的问题

qq_44747508的博客

01-02

3245

在使用element-plus的el-menu组件时发现刷新页面后，菜单不会默认选中也不会高亮。很多答案都没有说明真正的原因在哪里，代码又多看起来颇为费力，实际上只要设置el-menu组件的default-active属性 <template> <el-menu :unique-opened="true" :collapse-transition="true" :default-active="defaultMenu" class="el-menu-

element-plus中取消el-menu的选中状态

05-23

在element-plus中，取消el-menu的选中状态可以通过以下两种方式实现： 1. 使用v-model绑定当前选中的菜单项，在取消选中状态时将v-model的值设为null即可： ```html <el-menu v-model="selectedMenu"> <el-menu-...