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

源码资源网 · 发表于 3 天前

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

vue
<template>
<div>
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
<el-menu-item v-for="item in menuItems" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeMenu: '1', // 默认选中的菜单项
menuItems: [ // 菜单数据
{ id: '1', name: '菜单项1' },
{ id: '2', name: '菜单项2' },
{ id: '3', name: '菜单项3' }
]
};
},
methods: {
handleSelect(index) {
this.activeMenu = index; // 处理菜单项选择事件
}
}
}
</script>

复制代码

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

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

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

vue
<template>
<div>
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
<el-menu-item v-for="item in menuItems" :key="item.id" :index="item.id">{{ item.name }}</el-menu-item>
</el-menu>
<p>您选择的菜单项是：{{ selectedMenuItem }}</p>
</div>
</template>
<script>
export default {
data() {
return {
activeMenu: '1', // 默认选中的菜单项
menuItems: [ // 菜单数据
{ id: '1', name: '菜单项1' },
{ id: '2', name: '菜单项2' },
{ id: '3', name: '菜单项3' }
],
selectedMenuItem: '' // 用于存储选择的菜单项名称
};
},
methods: {
handleSelect(index) {
this.activeMenu = index; // 更新选中的菜单项
this.selectedMenuItem = this.menuItems.find(item => item.id === index).name; // 获取选中菜单项的名称
}
}
}
</script>

复制代码

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

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

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

相关帖子