VUE中动态赋值el-menu详细说明

源码资源网

VUE中动态赋值el-menu详细说明
在Vue中动态赋值 `el-menu` 组件可以通过绑定数据来实现。您可以使用Vue的数据属性来存储菜单数据，然后在 `el-menu` 组件中动态绑定这些数据。以下是一个示例，展示如何在Vue中动态赋值 `el-menu` 组件并进行中文输出：

1. vue
   
2. <template>
   
3.   <div>
   
4.     <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
   
5.       <el-menu-item v-for="item in menuItems" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
   
6.     </el-menu>
   
7.   </div>
   
8. </template>
   
9. <script>
   
10. export default {
    
11.   data() {
    
12.     return {
    
13.       activeMenu: '1', // 默认选中的菜单项
    
14.       menuItems: [ // 菜单数据
    
15.         { id: '1', name: '菜单项1' },
    
16.         { id: '2', name: '菜单项2' },
    
17.         { id: '3', name: '菜单项3' }
    
18.       ]
    
19.     };
    
20.   },
    
21.   methods: {
    
22.     handleSelect(index) {
    
23.       this.activeMenu = index; // 处理菜单项选择事件
    
24.     }
    
25.   }
    
26. }
    
27. </script>

复制代码

在上面的示例中， `menuItems` 数组存储了菜单项的数据，每个菜单项包含一个 `id` 和 `name` 属性。通过 `v-for` 指令遍历 `menuItems` 数组，动态生成 `el-menu-item` 组件，并显示菜单项的名称。当用户选择菜单项时，会触发 `handleSelect` 方法，更新 `activeMenu` 的值来标记当前选中的菜单项。
您可以根据实际需求调整菜单数据和样式，以满足您的项目要求。



对于 el-menu-item点击和选择事件示例代码

在Vue中，您可以使用 `el-menu-item` 组件的点击和选择事件来实现菜单项的互动功能。以下是一个示例代码，展示如何在Vue中处理 `el-menu-item` 的点击和选择事件，并进行中文输出：

1. vue
   
2. <template>
   
3.   <div>
   
4.     <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
   
5.       <el-menu-item v-for="item in menuItems" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
   
6.     </el-menu>
   
7.     <p>您选择的菜单项是：{{ selectedMenuItem }}</p>
   
8.   </div>
   
9. </template>
   
10. <script>
    
11. export default {
    
12.   data() {
    
13.     return {
    
14.       activeMenu: '1', // 默认选中的菜单项
    
15.       menuItems: [ // 菜单数据
    
16.         { id: '1', name: '菜单项1' },
    
17.         { id: '2', name: '菜单项2' },
    
18.         { id: '3', name: '菜单项3' }
    
19.       ],
    
20.       selectedMenuItem: '' // 用于存储选择的菜单项名称
    
21.     };
    
22.   },
    
23.   methods: {
    
24.     handleSelect(index) {
    
25.       this.activeMenu = index; // 更新选中的菜单项
    
26.       this.selectedMenuItem = this.menuItems.find(item => item.id === index).name; // 获取选中菜单项的名称
    
27.     }
    
28.   }
    
29. }
    
30. </script>

复制代码

在上面的示例中，当用户点击菜单项时，会触发 `handleSelect` 方法，该方法会更新 `selectedMenuItem` 的值为当前选中菜单项的名称。然后在页面上显示出您选择的菜单项名称。您可以根据需要对菜单项的点击和选择事件进行处理，以实现您想要的功能。