当前位置:首页 » 《随便一记》 » 正文

vue3使用el-menu多级菜单出现点击一个全部展开的问题

16 人参与  2024年02月11日 12:36  分类 : 《随便一记》  评论

点击全文阅读


第一步、创建SubMenu

<template><div>  <template  v-for="menu in this.menuData" :key="menu.url">    <el-sub-menu  v-if="menu.children"  :index="menu.url" :key="menu.url" >      <template #title>        <el-icon><component :is="menu.icon"></component></el-icon>{{menu.name}}      </template>      <sub-menu :menu-data="menu.children"></sub-menu>    </el-sub-menu>    <el-menu-item v-else :index="menu.url" >      <template #title>        <el-icon><component :is="menu.icon"></component></el-icon>{{menu.name}}      </template>    </el-menu-item>  </template></div></template><script>export default {  name: "SubMenu",  props: {    menuData:null  },}</script>

第二步、创建MenuTree文件

<template>  <el-menu      router      :default-active="$route.path"      background-color="#616369"      text-color="#fff">    <sub-menu :menu-data="menuData"></sub-menu>  </el-menu></template><script>import SubMenu from "@/views/template/menu/SubMenu";export default {  components: {SubMenu},  props: {    menuData:null  },  name: "MenuTree"}</script><style scoped></style>

第三步、使用

第三步、出现问题,尝试解决

        测试时发现单击菜单显示子菜单时其它的菜单也被展开,看了其它文章写的是修改:index="menu.index",

        虽然点击菜单其它的子菜单不会展开了,但是index存的是编号,url存的是路由地址,点击子菜单地址栏显示的是编号信息,不是地址,如图所示

 第四步、发现问题所在,解决问题

         查看循环菜单的数据menuList,发现只有叶子菜单的数据才配置了url,其它级别的则为空数据,所以就导致了配置:index="menu.url"时出现点击一个全部展开的情况。

 第五步、解决方法

第一种,使用第二步的写法,后台数据库的数据url字段不为null且值不相同

第二种,修改代码el-sub-menu中的:index值为menu.index,el-menu-item的值为menu.url

注意:后端数据库url和index传的值是唯一的,也不能出现两个空值


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/68136.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 填错志愿后,我成了活神仙章节目录_顾言姜澈林晓晓优质全文_小说后续在线阅读_无删减免费完结_
  • 沈亦初秦景泽后续(以后,她都不要再喜欢他了)(沈亦初秦景泽)整本畅享在线+无广告结局
  • 独家猎户夫君你轻点宠小说(云柔苏安)(猎户夫君你轻点宠)电子书畅享阅读
  • 全网首发容止洛云曦小说叫什么(他死后女帝火葬场了)(容止洛云曦)全书阅读纯净阅读
  • 周砚川战景熙小说章节目录+序章(离婚后,保镖前夫他成了财阀大佬)全书畅享在线
  • 碎骨惨死后,我与宿敌联手弑夫证道特别篇章节目录+章节前文(齐南韵柳苑云)TXT清爽版在线
  • 重生八零年代点天灯后,崇洋***的养妹疯了章节目录_肖颖芝江天肖星苒书荒_小说后续在线阅读_无删减免费完结_
  • 最新章节(姜小九徐琛)霸婚总裁小蛮妻:结局+番外精品选集附加章节列表
  • 死后十年,妈妈收到我的死亡通知高口碑_妹妹爸爸妈妈大丫隐藏剧情_小说后续在线阅读_无删减免费完结_
  • 邻居连续偷菜93天小说(林婉清顾星河)章节目录+起点章节(邻居连续偷菜93天)全篇清爽版在线
  • 何时慢顾砚之后续(你惹她干嘛?她带四十米大刀来了)(何时慢顾砚之)整本畅享在线+无广告结局
  • 结婚纪念日当天,老公说他出差了必读文_陆言林姗老公内容精选_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1