el-menu动态渲染问题

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是否有同样问题或解决是否同样生效未知

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您好!对于动态侧边栏,您可以使用 Element UI 中的 el-menu 组件来实现。el-menu 是一个强大的菜单组件,可以根据数据动态生成菜单项。 首先,您需要准备好菜单的数据。可以是一个数组,每个元素代表一个菜单项,包含菜单的标题、图标、路径等信息。 然后,在页面中使用 el-menu 组件,并通过 v-for 指令循环渲染菜单项。使用 v-bind 指令将菜单项的数据绑定到组件的属性上,例如 title、icon、index 等。 示例代码如下所示: ```html <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router> <template v-for="item in menuList"> <el-submenu v-if="item.children && item.children.length > 0" :key="item.index" :index="item.index"> <template slot="title"> <i :class="item.icon"></i> <span>{{ item.title }}</span> </template> <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index"> <router-link :to="child.path">{{ child.title }}</router-link> </el-menu-item> </el-submenu> <el-menu-item v-else :key="item.index" :index="item.index"> <i :class="item.icon"></i> <span>{{ item.title }}</span> </el-menu-item> </template> </el-menu> ``` 在上面的示例中,menuList 是一个数组,保存了菜单项的信息。使用 v-for 指令将其循环渲染成菜单项。如果菜单项有子菜单,则使用 el-submenu 组件包裹 el-menu-item 组件。如果没有子菜单,则直接使用 el-menu-item 组件。 通过 :index 绑定菜单项的索引值,可以实现高亮当前选中的菜单项。使用 :default-active 绑定 $route.path,可以根据当前路由路径自动选中对应的菜单项。 以上就是使用 el-menu 实现动态侧边栏的基本步骤,您可以根据自己的需求进行进一步的定制和样式调整。希望能对您有帮助!如果还有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

晨灰ash2

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

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

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

打赏作者

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

抵扣说明:

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

余额充值