ソースを参照

【issues/6855】组件使用key作props报警告,改为itemKey

JEECG 9 ヶ月 前
コミット
4753a74456

+ 5 - 2
jeecgboot-vue3/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue

@@ -18,13 +18,16 @@
     name: 'DropdownMenuItem',
     components: { MenuItem: Menu.Item, Icon },
     props: {
-      key: propTypes.string,
+      // 【issues/6855】
+      itemKey: propTypes.string,
       text: propTypes.string,
       icon: propTypes.string,
     },
     setup(props) {
       const instance = getCurrentInstance();
-      const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
+      // update-begin--author:liaozhiyang---date:20240717---for:【issues/6855】组件使用key作props报警告,改为itemKey
+      const itemKey = computed(() => props.itemKey || instance?.vnode?.props?.itemKey);
+      // update-end--author:liaozhiyang---date:20240717---for:【issues/6855】组件使用key作props报警告,改为itemKey
       return { itemKey };
     },
   });

+ 7 - 7
jeecgboot-vue3/src/layouts/default/header/components/user-dropdown/index.vue

@@ -11,19 +11,19 @@
 
     <template #overlay>
       <Menu @click="handleMenuClick">
-        <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" />
+        <MenuItem itemKey="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" />
         <MenuDivider v-if="getShowDoc" />
-        <MenuItem key="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" />
-        <MenuItem key="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
-        <MenuItem key="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
-        <MenuItem key="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
+        <MenuItem itemKey="account" :text="t('layout.header.dropdownItemSwitchAccount')" icon="ant-design:setting-outlined" />
+        <MenuItem itemKey="password" :text="t('layout.header.dropdownItemSwitchPassword')" icon="ant-design:edit-outlined" />
+        <MenuItem itemKey="depart" :text="t('layout.header.dropdownItemSwitchDepart')" icon="ant-design:cluster-outlined" />
+        <MenuItem itemKey="cache" :text="t('layout.header.dropdownItemRefreshCache')" icon="ion:sync-outline" />
         <!-- <MenuItem
             v-if="getUseLockPage"
-            key="lock"
+            itemKey="lock"
             :text="t('layout.header.tooltipLock')"
             icon="ion:lock-closed-outline"
         />-->
-        <MenuItem key="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
+        <MenuItem itemKey="logout" :text="t('layout.header.dropdownItemLoginOut')" icon="ion:power-outline" />
       </Menu>
     </template>
   </Dropdown>