el-menu的index报错

使用 el-menu 的抗
在使用 el-menu 组件进行实现页面布局,一直弹出下面的错误
错误:在这里插入图片描述
解决方法:
在这里插入图片描述
此处index接收的 id 为 数字型, 需要把 id 转成 字符串 即可
在这里插入图片描述

<template> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']" :default-active="'1-1'"> <el-submenu index="1"> <template v-slot:title><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template v-slot:title>分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template v-slot:title> <h1>标题</h1> </template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template v-slot:title><i class="el-icon-menu"></i>导航二</template> <el-menu-item-group> <template v-slot:title>分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template v-slot:title>选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template v-slot:title><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template v-slot:title>分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template v-slot:title>选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu v-slot:dropdown> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> </template> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> <script> export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }; </script> 没有问题吧为什么会显示无法识别slot name
05-28
<template> <el-container class="layout-container-demo" style="height: 500px"> <el-aside width="200px"> <el-scrollbar> <el-menu :default-openeds="['1', '3']"> <el-sub-menu index="1"> <template #title> <el-icon><message /></el-icon>Navigator One </template> <el-menu-item-group> <template #title>Group 1</template> <el-menu-item index="1-1">Option 1</el-menu-item> <el-menu-item index="1-2">Option 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group 2"> <el-menu-item index="1-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="1-4"> <template #title>Option4</template> <el-menu-item index="1-4-1">Option 4-1</el-menu-item> </el-sub-menu> </el-sub-menu> <el-sub-menu index="2"> <template #title> <el-icon><icon-menu /></el-icon>Navigator Two </template> <el-menu-item-group> <template #title>Group 1</template> <el-menu-item index="2-1">Option 1</el-menu-item> <el-menu-item index="2-2">Option 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group 2"> <el-menu-item index="2-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="2-4"> <template #title>Option 4</template> <el-menu-item index="2-4-1">Option 4-1</el-menu-item> </el-sub-menu> </el-sub-menu> <el-sub-menu index="3"> <template #title> <el-icon><setting /></el-icon>Navigator Three </template> <el-menu-item-group> <template #title>Group 1</template> <el-menu-item index="3-1">Option 1</el-menu-item> <el-menu-item index="3-2">Option 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group 2"> <el-menu-item index="3-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="3-4"> <template #title>Option 4</template> <el-menu-item index="3-4-1">Option 4-1</el-menu-item> </el-sub-menu> </el-sub-menu> </el-menu> </el-scrollbar> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <div class="toolbar"> <el-dropdown> <el-icon style="margin-right: 8px; margin-top: 1px"> <setting /> </el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>View</el-dropdown-item> <el-dropdown-item>Add</el-dropdown-item> <el-dropdown-item>Delete</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <span>Tom</span> </div> </el-header> <el-main> <el-scrollbar> <el-table :data="tableData"> <el-table-column prop="date" label="Date" width="140" /> <el-table-column prop="name" label="Name" width="120" /> <el-table-column prop="address" label="Address" /> </el-table> </el-scrollbar> </el-main> </el-container> </el-container> </template> <!----> <script lang="ts" setup> import { ref } from 'vue' import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue' const item = { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', } const tableData = ref(Array.from({ length: 20 }).fill(item)) </script> <style scoped> .layout-container-demo .el-header { position: relative; background-color: var(--el-color-primary-light-7); color: var(--el-text-color-primary); } .layout-container-demo .el-aside { color: var(--el-text-color-primary); background: var(--el-color-primary-light-8); } .layout-container-demo .el-menu { border-right: none; } .layout-container-demo .el-main { padding: 0; } .layout-container-demo .toolbar { display: inline-flex; align-items: center; justify-content: center; height: 100%; right: 20px; } </style> idea运行以上代码报错了该如何解决
07-05
页面// 展示组件页面 <template> <el-container style="height: 100%; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['', '']"> <el-submenu index="0"> <template slot="title"> <i class="el-icon-setting"></i>数据管理</template> <el-menu-item-group> <el-menu-item index="/adminChart">数据统计</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="1"> <template slot="title"> <i class="el-icon-setting"></i>公告</template> <el-menu-item-group> <el-menu-item index="1-1">公告管理</el-menu-item> <el-menu-item index="1-2">反馈信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>用户管理</template> <el-menu-item-group> <el-menu-item index="2-1">用户信息</el-menu-item> <el-menu-item index="2-2">教练信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-setting"></i>课程管理</template > <el-menu-item-group> <el-menu-item index="3-1">课程信息</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="4"> <template slot="title"> <i class="el-icon-setting"></i>训练馆管理</template > <el-menu-item-group> <el-menu-item index="4-1">器材管理</el-menu-item> <el-menu-item index="4-2">场地管理</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px">管理员</i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>注销</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </template> <script> export default { data() { return {}; }, }; </script> <style> .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } html, body, #app, .el-container { /*设置内部填充为0,几个布局元素之间没有间距*/ padding: 0px; /*外部间距也是如此设置*/ margin: 0px; /*统一设置高度为100%*/ height: 100vh; } .el-aside { height: 100%; background-color: #d3dce6; } </style> js: { path: '/admin', name: 'admin', component: AdminView, children: [ { path: '/adminChart', name:'adminChart', component: ChartView } ] }跳不过去
最新发布
09-10
### 关于 `el-menu` 组件的 `open` 方法报错解决方案 当遇到 `el-menu` 的 `open` 方法调用时报错的情况,通常是因为组件初始化过程中存在一些配置不当或是状态管理上的问题。以下是几种常见的原因及其对应的解决办法: #### 1. 初始化前调用了 `open` 方法 如果在 `el-menu` 完全加载之前就尝试调用其 `open` 方法,则可能会引发错误。确保只在组件已经完成挂载之后再执行此操作。 ```javascript // 正确做法是在 mounted 生命周期钩子内调用 open 方法 export default { name: 'ExampleComponent', methods: { handleOpen(key, keyPath) { this.$refs.menu.open(key); } }, mounted() { // 延迟一段时间以确保 DOM 已经更新完毕 setTimeout(() => { this.handleOpen('someKey'); }, 0); } } ``` #### 2. 错误的关键字参数传递给 `open` 确认传入到 `open` 函数中的关键字确实存在于菜单项中,并且与定义时使用的索引相匹配。这可以通过仔细检查模板部分来验证。 ```html <template> <el-menu ref="menu"> <!-- 确认这里的index值要和this.$refs.menu.open(key)里的key一致 --> <el-submenu index="uniqueIndexValue">...</el-submenu> </el-menu> </template> ``` #### 3. 使用了不兼容版本的方法签名 不同版本之间可能存在 API 变更,因此建议查阅官方文档获取最新版的支持说明并按照相应的方式调整代码逻辑[^3]。 另外需要注意的是,在某些情况下,默认打开的状态可能无法通过编程方式改变;对于这种情况可以考虑使用 `default-active` 或者设置初始状态下哪些子菜单应该被展开(`default-openeds`) 来间接达到目的[^1]。 最后提醒一点,由于框架本身不断迭代升级,具体实现细节会有所变化,所以强烈推荐参考最新的 [Element UI 文档](https://element.eleme.io/#/zh-CN/component/menu) 获取最准确的信息和支持。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值