el-menu动态渲染问题

最新推荐文章于 2025-06-05 12:50:21 发布
最新推荐文章于 2025-06-05 12:50:21 发布
阅读量793 收藏
点赞数 1
分类专栏： 前端功能效果 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dbeidouxingf/article/details/132191616
版权
文章讲述了在ElementUI中，动态渲染菜单列表时遇到的激活样式bug和前后el-submenu状态互相影响的问题。解决方法包括使用`key`属性区分el-menu-item和el-submenu，并指出在Vue2环境下使用ElementUIPlus+Vue3可能存在的未知情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

element ui
对于菜单列表，可以使用el-menu 组件进行渲染，但是当渲染的列表会动态的变化时，会出现一定问题

后渲染的列表激活样式bug

问题：初始渲染的菜单列表点击可以选中，并显示激活状态。但是当列表动态切换后，再次渲染的列表在点击时没有激活样式，最多只显示悬浮样式，想要有激活样式，需要双击。
解决：需要对el-menu-item标签进行区分，可以使用:key="id"等属性对各个el-menu-item标签进行区分，使其重新渲染。

前后渲染的el-submenu互相影响

问题：初始的el-submenu展开时，若切换渲染列表，则渲染后的el-submenu也保持展开时状态。即前后渲染的el-submenu展开与收起会保持一致。
解决：此时对el-submenu使用key进行区分并不比作用，需要使用:index="id"对el-submenu进行区分。index是el-submenu的唯一区分标志。

以上测试使用的是Element UI，Vue2环境。Element UI Plus+Vue3是否有同样问题或解决是否同样生效未知

el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
草巾冒小子的博客
04-10 8万+
element-UI 下拉框el-select组件el-option的v-for问题 我的代码： <template> <div id="htmlWrap"> <!--header--> <div class="bg545C64"> <NavMenuVue></NavMenuVue&a
【记录41】el-menu 动态菜单
~牧马~
04-06 646
【代码】【记录41】el-menu 动态菜单。
VUE页面点击时重新加载
bloestone的博客
07-21 1415
因为某些场景需要，每次点击菜单时刷新页面，通过监听路由变化每次重新加载 <template> <div></div> </template> <script> export default { inject: ['reload'], data() { return { }; }, mounted() { ... }, methods: { rebuild() {
element-plus动态渲染el-menu(vue3)
yasuo56的博客
06-02 2126
element-plus动态渲染el-menu(vue3)
vue3 setup函数中 解决 el-menu 重复点击 el-menu-item 路由不变参数改变但页面不刷新问题
2203_75707868的博客
05-25 602
以上是我的菜单栏代码，分类中是后台获取的数据 同时还有个问题是 当点击浏览器刷新时 默认选中的当前菜单会改变 页面不变 我想要的是 在浏览分类页面时刷新页面 也不会改变路由和页面 所以我将 每次点击的路由保存到cookie当中。以及用watch监听路由变化 再由nextTick，v-if=”isReload“控制组件的创建和销毁将路由刷新实现页面重新渲染。记住nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。
详解VUE Element-UI多级菜单动态渲染的组件
12-29
以下是组件代码： <template> <div class=navMenu> <label v-for=navMenu> <el-menu-item v-if=navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE' :key=navMenu.entity.id :data=navMenu :index=navMenu.entity.name :route=navMenu.entity.value disa
el-menu动态渲染多级菜单
starstarstarl的博客
06-06 2144
子组件：根据菜单数组的结构自行修改pagePojoList，pageUrl，kid，name，及自定义图标。思路：创建子菜单递归组件，这里我命名为MySubMenu.vue。父组件：引用自定义组件MySubMenu，将菜单数组传递给子组件。
动态菜单渲染（包括权限问题）
Miketutu的博客
02-14 604
动态菜单渲染（包括权限问题）
vue3+element-plus 实现动态菜单和动态路由的渲染
gt8011的博客
07-23 5301
这个组件通过 Vue Router 的useRouter钩子获取当前路由的配置信息，并根据这些信息动态生成菜单项。使用computed属性来区分哪些路由有子菜单，哪些没有，然后相应地渲染或。点击菜单项时，使用方法来改变页面的路由，实现导航功能。并通过useRoute钩子获取当前激活的路由，然后设置activeMenu来决定哪个菜单项应该处于激活状态。
动态渲染 Element UI el-menu 组件
热门推荐
一行代码
01-08 2万+
相信大家在使用 Element UI 中 el-menu 组件的时候，都碰到过如何通过数据动态渲染的问题，而官方的文档却没有这个实例，网上找的一些博客大部分人都实现了 el-menu 的垂直模式，而水平模式却没有，并且垂直模式的 el-menu 在收缩的时候会出现问题，但是他们并没有去解决，让我很苦恼，没办法，只能自己去解决了，先给大家看看效果先： 如上所示，水平和垂直模式的el-menu都一...
element 中 el-menu 组件的无限极循环思路代码详解
10-15
其中，el-menu 组件用于创建菜单导航，其支持多种类型，包括横向和纵向。本文详细探讨了如何在 Element UI 中使用 el-menu 组件实现无限极循环菜单，即菜单项的子菜单项还可以拥有自己的子菜单，形成一个嵌套的结构...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
6. **数据绑定和动态渲染**：在更复杂的应用中，`el-menu`的内容可能需要动态生成，例如根据后台API获取的数据。在给出的代码片段中，可以看到使用`v-for`指令遍历数据数组，动态创建子菜单。这种方式可以根据业务...
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，
每天都要努力学习哦~~
01-25 368
官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的Svg。最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。
基于Vue+elementUI menu组件的动态渲染多级目录
qq_41720628的博客
10-09 1137
后端接口是，通过父级目录id查询子级目录列表，所以我需要动态渲染一个多级目录，目录深度不确定。我使用了elementUi的menu组件，因为项目是基于Vue2 的所有 是用的。其实可以不使用这样的方式存储menu的路径，elementUI官方提供相应的方法。方式是因为menu组件抽风了，就是没有存储到路径。函数，我把目录的路径存储在menu的index属性里面。第一层第一个-->第二层的第三个-->第三层的第三个。下图是作者的实际项目的代码，仅供参考。父组件script部分，仅供参考。
vite-vue3打包后出现el-menu动态菜单不渲染的bug
feifei9989的博客
04-13 949
vite-vue3打包后出现el-menu动态菜单不渲染的bug;vite打包后获取computed(() => $store.getters加载很慢
一个element plus表单组件无法正常渲染的问题
Onmyoji_XG的博客
11-17 462
这个表单是由数据项渲染的，使用数据渲染每一个el-form-item的prop，label等.解决方法就是不让它为空，就算是个空对象，空数组也行ref({})，不要是空值ref()这样导致了表单中应绑定的:model ，绑定了一个空值，这就是问题所在。他在编译过程中不会报错（这就体现ts的好用之处了）在表单校验时会报model空了的警告。正常显示表单项内容了。
el-menu多级动态菜单渲染
ZhangXiaoTianZC的博客
09-01 6208
使用el-menu时往往会遇到动态渲染使用场景 安装和引用element暂不赘叙，对其使用方法不是很熟悉的小伙伴可以去官网按照指引完成使用 先简单叙述一下渲染思路： 首先我们要知道要渲染一个多级菜单的过程实际上就是对后端给我们的多层数据格式进行循环遍历的一个过程，只是在遍历的过程中，需要对是否submit-menu和普通el-menu-item进行判断。 这里使用的是自定义组件 创建MenuTree组件 src/components/MenuTree.vue // 以下是组件内容 <div>
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
最新发布
xiaogg3678的专栏
06-05 387
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
el-menu渲染静态路由
03-04
### 使用 `el-menu` 渲染静态路由 为了实现通过 `element-ui` 的 `el-menu` 组件来渲染静态路由，可以将 Vue Router 中定义的路由映射到菜单项中。下面是一个具体的例子说明如何完成这一操作。 #### 定义路由配置 首先，在项目中创建一个包含所有静态路由的对象数组： ```javascript const routes = [ { path: '/home', component: Home, label: 'Home' }, { path: '/about', component: About, label: 'About Us' } ]; ``` 接着初始化 Vue Router 实例并传入这些路由[^1]。 #### 创建导航菜单模板 在 HTML 或单文件组件 (SFC) 中编写如下结构用于显示菜单条目： ```html <template> <div id="app"> <!-- 菜单 --> <el-menu :default-active="$route.path" router mode="horizontal"> <el-menu-item v-for="(item, index) in menuItems" :key="index" :index="item.path">{{ item.label }}</el-menu-item> </el-menu> <!-- 页面内容区域 --> <router-view></router-view> </div> </template> ``` 这段代码利用了 `<el-menu>` 和 `<el-menu-item>` 来构建水平布局的顶部导航栏，并且设置了 `router` 属性使得点击菜单项能够触发相应的页面跳转；同时设置默认激活状态为当前路径 `$route.path`。 #### 数据绑定与逻辑处理 最后一步是在 JavaScript 部分添加数据属性以及任何必要的计算属性或方法来进行数据传递给视图层： ```javascript export default { data() { return { menuItems: this.routes // 将前面定义好的routes赋值给menuItems变量以便于v-for循环遍历 }; }, }; ``` 这样就完成了基于 `element-ui` 的 `el-menu` 组件对静态路由的支持。当访问者浏览网站时，他们可以通过点击不同的菜单选项轻松切换不同页面的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨灰ash2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值