weixin_58412143 2022-08-05 15:04 采纳率: 91.6%
浏览 128
已结题

vueel-menu 循环菜单获取不到2级key值

情景:使用了element 的侧边导航栏,根据网上例子写出,选中2级菜单后字体由黑色变为蓝色,同时该父菜单背景色变蓝字体变白
问题:点击2级菜单的时候,父级菜单样式正确但是2级菜单里所有的字体都变蓝了;打印出key值,2级未null,1级可以获取到
代码如下:

<div class="ax_default line">
                    <el-row class="tac">
                        <el-col>
                            <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                                @select="selectMenu" text-color="#000" active-text-color="#3582fb"
                                :default-active="currentIndexLight">
                                <div v-for="(item, index) in submenu" :key="'submenu-'+ index">
                                    <template v-if="item.children && item.children.length > 1 ">
                                        <el-submenu :index="index + ''">
                                            <template slot="title">
                                                <span>{{ item.label }}</span>
                                            </template>
                                            <el-menu-item v-for="(childrenItem,childrenIndex) in item.children"
                                                :key="'childrenItem-'+ childrenIndex">
                                                {{ childrenItem.label }}
                                            </el-menu-item>
                                        </el-submenu>
                                    </template>
                                    <el-menu-item v-else :index="index + ''">
                                        {{ item.label }}
                                    </el-menu-item>
                                </div>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>


//侧边栏
     selectMenu(key, keyPath, item) {
      console.log('key', key, 'keyPath', keyPath)
      // console.log(item);
      this.currentIndexLight = key;
      if (key === null) {
       // this.currentIndexLight = keyPath[0];
      }
     },
     handleOpen(key, keyPath) {
      console.log('key', key, 'keyPath', keyPath)
     },
     handleClose(key, keyPath) {
      console.log('key', key, 'keyPath', keyPath)
     },
currentIndexLight: '', //当前激活菜单的 index  高亮显示
    currentIndexLight: '', //当前激活菜单的 index  高亮显示
                    submenu: [{
                            label: '倾诉吧',
                            // icon: 'el-icon-menu',
                            children: [{
                                    // path: '/equipmentList',
                                    // name: 'equipmentList',
                                    label: '复习方法',
                                    // icon: 'setting',
                                    // url: 'Other/PageOne'
                                },
                                {
                                    // path: '/equipmentClass',
                                    // name: 'equipmentClass',
                                    label: '注考故事',
                                    // icon: 'setting',
                                    // url: 'Other/PageTwo'
                                }
                            ]
                        },
                        {
                            label: '提问吧',
                            // icon: 'el-icon-menu',
                            children: [{
                                    // path: '/page1',
                                    // name: 'page1',
                                    label: '复习',
                                    // icon: 'setting',
                                    // url: 'Other/PageOne'
                                },
                                {
                                    // path: '/page2',
                                    // name: 'page1',
                                    label: '故事',
                                    // icon: 'setting',
                                    // url: 'Other/PageTwo'
                                },
                                {
                                    // path: '/page3',
                                    // name: 'page3',
                                    label: '测试',
                                    // icon: 'setting',
                                    // url: 'Other/PageTwo'
                                }
                            ]
                        }, {
                            label: '分享吧',
                            // icon: 'el-icon-menu',
                            children: [{
                                // path: '/page3',
                                // name: 'page3',
                                // label: '分享测试',
                                // icon: 'setting',
                                // url: 'Other/PageTwo'
                            }]
                        },
                    ],
  • 写回答

1条回答 默认 最新

  • 明晚打老虎123 2022-08-08 11:34
    关注

    你二级菜单的index没给

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月16日
  • 已采纳回答 8月8日
  • 修改了问题 8月5日
  • 创建了问题 8月5日

悬赏问题

  • ¥115 用Java解决探地雷达dzt文件的解析过程
  • ¥20 有关神经网络这道(b)determine the parameters of neural network
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy