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

源码资源网

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

1. html
   
2. <template>
   
3.   <el-menu :default-active="activeName" mode="horizontal" @select="handleSelect">
   
4.     <el-submenu index="1">
   
5.       <template slot="title">子菜单项一</template>
   
6.       <el-menu-item index="1-1">子菜单项一-1</el-menu-item>
   
7.       <el-menu-item index="1-2">子菜单项一-2</el-menu-item>
   
8.     </el-submenu>
   
9.     <el-submenu index="2">
   
10.       <template slot="title">子菜单项二</template>
    
11.       <el-menu-item index="2-1">子菜单项二-1</el-menu-item>
    
12.       <el-menu-item index="2-2">子菜单项二-2</el-menu-item>
    
13.     </el-submenu>
    
14.   </el-menu>
    
15.   <div>
    
16.     <p>选中的名称：{{ selectedName }}</p>
    
17.     <p>选中的索引：{{ selectedIndex }}</p>
    
18.   </div>
    
19. </template>
    
20. <script>
    
21. export default {
    
22.   data() {
    
23.     return {
    
24.       activeName: '1-1',
    
25.       selectedName: '',
    
26.       selectedIndex: ''
    
27.     };
    
28.   },
    
29.   methods: {
    
30.     handleSelect(index, indexPath) {
    
31.       this.selectedName = this.$refs.menu.getItem(index).$el.innerText.trim();
    
32.       this.selectedIndex = index;
    
33.     }
    
34.   }
    
35. };
    
36. </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)` 方法。以下是更新后的代码示例：

1. html
   
2. <template>
   
3.   <el-menu :default-active="activeName" mode="horizontal" @select="handleSelect">
   
4.     <el-submenu index="1">
   
5.       <template slot="title">子菜单项一</template>
   
6.       <el-menu-item index="1-1">子菜单项一-1</el-menu-item>
   
7.       <el-menu-item index="1-2">子菜单项一-2</el-menu-item>
   
8.     </el-submenu>
   
9.     <el-submenu index="2">
   
10.       <template slot="title">子菜单项二</template>
    
11.       <el-menu-item index="2-1">子菜单项二-1</el-menu-item>
    
12.       <el-menu-item index="2-2">子菜单项二-2</el-menu-item>
    
13.     </el-submenu>
    
14.   </el-menu>
    
15.   <div>
    
16.     <p>选中的名称：{{ selectedName }}</p>
    
17.     <p>选中的索引：{{ selectedIndex }}</p>
    
18.   </div>
    
19. </template>
    
20. <script>
    
21. export default {
    
22.   data() {
    
23.     return {
    
24.       activeName: '1-1',
    
25.       selectedName: '',
    
26.       selectedIndex: ''
    
27.     };
    
28.   },
    
29.   methods: {
    
30.     handleSelect(index, indexPath) {
    
31.       this.selectedName = event.target.innerText.trim();
    
32.       this.selectedIndex = index;
    
33.     }
    
34.   }
    
35. };
    
36. </script>

复制代码

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


经过测试，问题解决。