项目概况

Arco组件用法记录

2026-01-291 min read前端技术
arco

a-menu

菜单组件经常需要实现联动,联动需要使用的属性如下。都是数组因为如果不是手风琴模式,是可以打开多个菜单和多个项目的。

  • open-keys
  • selected-keys
js
1<a-menu 2 accordion 3 :open-keys="currentOpenKeys" 4 :selected-keys="currentItemKeys" 5 @sub-menu-click="openKeyAction" 6 @menu-item-click="selectedItemKeyAction" 7 > 8</a-menu> 9 10// 当前打开的子菜单列表 11const currentOpenKeys = ref<string[]>([]) 12 13// 当前选中的子菜单 14const currentOpenKey = ref<string>('') 15 16// 当前选中的菜单项 17const currentSelectedItemKey = ref<string>(''); 18 19// 操作选中的菜单项 20const selectedItemKeyAction = (key: string) => { 21 currentSelectedItemKey.value = key; 22} 23 24// 操作打开的子菜单 25const openKeyAction = (key: string, openKeys: string[]) => { 26 currentOpenKey.value = key; 27 currentOpenKeys.value = openKeys 28} 29