el-menu，el-submenu，el-menu-item菜单子项被选中后，选中el-menu-item时，显示选中名称及index

源码资源网 · 发表于前天 10:49

el-menu，el-submenu，el-menu-item菜单子项被选中后，选中el-menu-item时，显示选中名称及index
在Vue.js中，您可以通过监听 `el-menu` 组件的 `select` 事件来获取选中的 `el-menu-item` 的名称和索引，并在页面上显示。下面是一个示例代码，演示如何在选中 `el-menu-item` 时显示其名称和索引：

html
<template>
<el-menu :default-active="activeName" mode="horizontal" @select="handleSelect">
<el-submenu index="1">
<template slot="title">子菜单项一</template>
<el-menu-item index="1-1">子菜单项一-1</el-menu-item>
<el-menu-item index="1-2">子菜单项一-2</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">子菜单项二</template>
<el-menu-item index="2-1">子菜单项二-1</el-menu-item>
<el-menu-item index="2-2">子菜单项二-2</el-menu-item>
</el-submenu>
</el-menu>
<div>
<p>选中的名称：{{ selectedName }}</p>
<p>选中的索引：{{ selectedIndex }}</p>
</div>
</template>
<script>
export default {
data() {
return {
activeName: '1-1',
selectedName: '',
selectedIndex: ''
};
},
methods: {
handleSelect(index, indexPath) {
this.selectedName = this.$refs.menu.getItem(index).$el.innerText.trim();
this.selectedIndex = index;
}
}
};
</script>

复制代码

在上面的示例中，我们通过监听 `el-menu` 组件的 `select` 事件来触发 `handleSelect` 方法。在 `handleSelect` 方法中，我们通过获取选中的 `el-menu-item` 的索引和名称，并将其显示在页面上。希朁这可以帮助您实现在选中 `el-menu-item` 时显示其名称和索引的功能。

上面代码运行后，提示 TypeError: Cannot read properties of undefined (reading 'getItem')

在您的代码中，出现了 `TypeError: Cannot read properties of undefined (reading 'getItem')` 错误，这是因为在 `handleSelect` 方法中尝试访问 `$refs.menu.getItem(index)` 时未能正确获取到 `$refs.menu` 的引用。这可能是由于在 `$refs.menu` 上没有正确设置引用导致的。
为了解决这个问题，您可以尝试使用 `$refs.menu` 直接访问选中的 `el-menu-item` 元素，而不是尝试调用 `getItem(index)` 方法。以下是更新后的代码示例：

html
<template>
<el-menu :default-active="activeName" mode="horizontal" @select="handleSelect">
<el-submenu index="1">
<template slot="title">子菜单项一</template>
<el-menu-item index="1-1">子菜单项一-1</el-menu-item>
<el-menu-item index="1-2">子菜单项一-2</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">子菜单项二</template>
<el-menu-item index="2-1">子菜单项二-1</el-menu-item>
<el-menu-item index="2-2">子菜单项二-2</el-menu-item>
</el-submenu>
</el-menu>
<div>
<p>选中的名称：{{ selectedName }}</p>
<p>选中的索引：{{ selectedIndex }}</p>
</div>
</template>
<script>
export default {
data() {
return {
activeName: '1-1',
selectedName: '',
selectedIndex: ''
};
},
methods: {
handleSelect(index, indexPath) {
this.selectedName = event.target.innerText.trim();
this.selectedIndex = index;
}
}
};
</script>

复制代码

在更新后的代码中，我们直接通过 `event.target.innerText` 来获取选中的菜单项的文本内容，而不是尝试使用 `$refs.menu.getItem(index)` 方法。这样可以避免引用问题导致的错误。

经过测试，问题解决。

		自动登录	找回密码
密码			立即注册

el-menu，el-submenu，el-menu-item菜单子项被选中后，选中el-menu-item时，显示选中名称及index

相关帖子