fix: 1538

Author: GaoNeng-wWw

packages/devui-vue/devui/menu/src/components/menu-item/menu-item.tsx

@@ -27,9 +27,9 @@ export default defineComponent({
     const multiple = inject('multiple') as boolean;
     const indent = inject('defaultIndent');
     const isCollapsed = inject('isCollapsed') as Ref<boolean>;
-    const defaultSelectKey = inject('defaultSelectKey') as string[];
+    const defaultSelectKey = inject('defaultSelectKey') as Ref<string[]>;
     const { disabled } = toRefs(props);
-    const isSelect = ref(initSelect(defaultSelectKey, key, multiple, disabled));
+    const isSelect = ref(initSelect(defaultSelectKey.value, key, multiple, disabled));
     const isLayer1 = ref(true);
     const rootMenuEmit = inject('rootMenuEmit') as (eventName: string, ...args: unknown[]) => void;
     const useRouter = inject('useRouter') as boolean;
@@ -90,7 +90,7 @@ export default defineComponent({
       }
     });
     watch(
-      () => defaultSelectKey,
+      ()=>[...defaultSelectKey.value],
       (n) => {
         isSelect.value = initSelect(n, key, multiple, disabled);
         classObject.value[menuItemSelect] = isSelect.value;

packages/devui-vue/devui/menu/src/menu.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
   emits: ['select', 'deselect', 'submenu-change'],
   setup(props: MenuProps, ctx) {
     const ns = useNamespace('menu');
-    const {openKeys, mode, collapsed} = toRefs(props);
+    const {openKeys, mode, collapsed, defaultSelectKeys} = toRefs(props);
     // This ID is only for internal use. So we unwanted use reactivity
     const menuId = randomId(16);
     // register menu to recordTable.
@@ -25,7 +25,7 @@ export default defineComponent({
     provide('defaultIndent', props['indentSize']);
     provide('multiple', props['multiple']);
     provide('openKeys', openKeys);
-    provide('defaultSelectKey', props.defaultSelectKeys);
+    provide('defaultSelectKey', defaultSelectKeys);
     provide('mode', mode);
     provide('collapsedIndent', props['collapsedIndent']);
     provide('rootMenuEmit', ctx.emit);

packages/devui-vue/docs/components/menu/index.md

@@ -309,7 +309,8 @@ export default defineComponent({
 ```vue
 <template>
   <d-button @click="changeDisabled">changeDisabled</d-button>
-  <d-menu mode="vertical" :width="width + 'px'" :default-select-keys="['item1']" :collapsed="collapsed">
+  <d-button @click="addSelect">change select</d-button>
+  <d-menu mode="vertical" :width="width + 'px'" :default-select-keys="selectKeys" :collapsed="collapsed">
     <d-menu-item key="item1" :disabled="isDisabled">
       <template #icon>
         <i class="icon-homepage"></i>
@@ -341,11 +342,20 @@ export default defineComponent({
 import { ref } from 'vue';
 let collapsed = ref(false);
 let isDisabled = ref(false);
+let selectKeys = ref([]);
 let width = ref(256);
 const changeDisabled = () => {
   isDisabled.value = !isDisabled.value;
   console.log(isDisabled.value);
 };
+const addSelect = () => {
+  if (selectKeys.value.includes('system-item')){
+    selectKeys.value.pop();
+  } else {
+    selectKeys.value.push('system-item');
+  }
+  console.log(selectKeys.value);
+}
 </script>
 ```