element-ui的menu怎么多选
时间: 2023-07-05 12:33:05 浏览: 43
在 element-ui 的 menu 组件中,如果想要支持多选,需要使用 el-menu 的 `select` 事件和 `selectedKeys` 属性。具体步骤如下:
1. 在 el-menu 上绑定 `selectedKeys` 属性,该属性维护了当前所选中的菜单项的 key 值数组。
2. 监听 el-menu 的 `select` 事件,该事件会在用户点击菜单项时触发。
3. 在 `select` 事件回调函数中,获取当前所选中的菜单项的 key 值,将其添加到 `selectedKeys` 数组中。
4. 在回调函数中,通过修改 `selectedKeys` 数组来实现多选的效果。
下面是示例代码:
```
<template>
<el-menu :selected-keys="selectedKeys" @select="handleMenuSelect" multiple>
<el-menu-item key="1">选项一</el-menu-item>
<el-menu-item key="2">选项二</el-menu-item>
<el-menu-item key="3">选项三</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
selectedKeys: [] // 维护当前所选中的菜单项的 key 值数组
}
},
methods: {
handleMenuSelect(key) {
// 将当前所选中的菜单项的 key 值添加到 selectedKeys 数组中
this.selectedKeys.push(key)
}
}
}
</script>
```
在上面的代码中,我们通过在 el-menu 组件上添加 `multiple` 属性来开启多选模式。在 `select` 事件的回调函数中,我们将当前所选中的菜单项的 key 值添加到 `selectedKeys` 数组中。因为 `selectedKeys` 是响应式的,所以 el-menu 会自动根据 `selectedKeys` 数组来更新菜单项的选中状态。