From 5772b40a5e63bfa3d8234e65fa16575f130109c1 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 13 Nov 2020 21:09:49 +0800 Subject: [PATCH] feat(menu): prop default-expand-all --- .../components/menu/enUS/index.demo-entry.md | 1 + .../components/menu/zhCN/index.demo-entry.md | 1 + src/menu/src/Menu.js | 24 ++++++++++++++----- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/demo/documentation/components/menu/enUS/index.demo-entry.md b/demo/documentation/components/menu/enUS/index.demo-entry.md index 126d42b4f..249e55d20 100644 --- a/demo/documentation/components/menu/enUS/index.demo-entry.md +++ b/demo/documentation/components/menu/enUS/index.demo-entry.md @@ -16,6 +16,7 @@ collapse |collapsed-icon-size|`number`|`undefined`|The icon size when menu is collapsed. If not set, menu will use `icon-size` in place of it.| |collapsed-width|`number`|`undefined`|The menu width after collapsed.| |collapsed|`boolean`|`false`|The collapsed status of menu, only works when menu is vertical.| +|default-expand-all|`boolean`|`false`|| |default-expanded-keys|`Array`|`[]`|The default expanded submenu keys of menu in uncontrolled manner.| |expanded-keys|`Array`|`undefined`|The expanded submenu keys. If set, menu will work in controlled manner and `default-expanded-names` won't work.| |icon-size|`number`|`20`|The icon size when menu is not collapsed.| diff --git a/demo/documentation/components/menu/zhCN/index.demo-entry.md b/demo/documentation/components/menu/zhCN/index.demo-entry.md index aed311faa..bbfa5f968 100644 --- a/demo/documentation/components/menu/zhCN/index.demo-entry.md +++ b/demo/documentation/components/menu/zhCN/index.demo-entry.md @@ -16,6 +16,7 @@ collapse |collapsed-icon-size|`number`|`24`|菜单折叠时图标的大小,如果为设定则使用 `icon-size` 代替| |collapsed-width|`number`|`undefined`|折叠后菜单的宽度| |collapsed|`boolean`|`false`|菜单是否折叠,值在菜单为垂直时有用| +|default-expand-all|`boolean`|`false`|| |default-expanded-keys|`Array`|`[]`|在非受控状态下默认展开的子菜单标识符数组| |expanded-keys|`Array`|`undefined`|展开的子菜单标识符数组,如果设定了,菜单的展开将会进入受控状态,`default-expanded-keys` 不会生效| |icon-size|`number`|`20`|菜单未折叠时图标的大小| diff --git a/src/menu/src/Menu.js b/src/menu/src/Menu.js index 2f8ca4d4d..8a9f1987e 100644 --- a/src/menu/src/Menu.js +++ b/src/menu/src/Menu.js @@ -53,6 +53,10 @@ export default { type: Number, default: 32 }, + defaultExpandedAll: { + type: Boolean, + default: false + }, defaultExpandedKeys: { type: Array, default: () => [] @@ -115,17 +119,25 @@ export default { } }, setup (props) { - const uncontrolledExpandedKeysRef = ref(props.defaultExpandedNames || props.defaultExpandedKeys) - const controlledExpandedKeysRef = useCompitable(props, 'expandedNames', 'expandedKeys') - const mergedExpandedKeysRef = useMergedState( - controlledExpandedKeysRef, - uncontrolledExpandedKeysRef - ) const treeMateRef = computed(() => createTreeMate(props.items, { getKey (node) { return node.key ?? node.name } })) + const uncontrolledExpandedKeysRef = ref( + props.defaultExpandedAll + ? treeMateRef.value.getNonLeafKeys() + : ( + props.defaultExpandedNames || + props.defaultExpandedKeys + ) + ) + const controlledExpandedKeysRef = useCompitable(props, 'expandedNames', 'expandedKeys') + const mergedExpandedKeysRef = useMergedState( + controlledExpandedKeysRef, + uncontrolledExpandedKeysRef + ) + const tmNodesRef = computed(() => treeMateRef.value.treeNodes) const valueRef = toRef(props, 'value') const activePathRef = computed(() => {