pref: add key fro list VNode (#542)

src/Breadcrumb/Breadcrumb.ts

@@ -11,8 +11,8 @@ export default defineComponent({
 
     return () =>
       h(ElBreadcrumb, mergeProps(props, { class: 'pro-breadcrumb' }), () =>
-        route.matched.map((item) =>
-          h(ElBreadcrumbItem, null, () =>
+        route.matched.map((item, index) =>
+          h(ElBreadcrumbItem, { key: index }, () =>
             h(ProLink, { to: item.path }, () => item.meta?.title),
           ),
         ),

src/Checkbox/Checkbox.ts

@@ -30,6 +30,7 @@ export function createDefault<T>(
           return h(
             component as DefineComponent,
             {
+              key: getValue(item),
               name: getName(item),
               value: getValue(item),
               disabled: getDisabled(item),

src/Descriptions/Descriptions.ts

@@ -54,6 +54,7 @@ export default defineComponent({
           ElDescriptionsItem,
           {
             ...item,
+            key: item.prop,
             align: item.align ?? props.align,
             labelAlign: item.labelAlign ?? props.labelAlign,
           },

src/Form/ArrayForm.ts

@@ -19,7 +19,7 @@ export default defineComponent({
       const indexes = [...(props.indexes || []), index]
       const prefix = withPoint(props.prefix, String(index))
 
-      return h('div', { class: 'pro-array-form' }, [
+      return h('div', { key: indexes.join('_'), class: 'pro-array-form' }, [
         h(
           'div',
           {

src/Form/CollapseForm.ts

@@ -27,8 +27,9 @@ export default defineComponent({
         return h(
           ElCollapseItem,
           mergeProps(getGroupFormItemBind(item), {
+            key: item.prop || index,
             title: item.label,
-            name: item.prop ?? index,
+            name: item.prop || index,
           }),
           {
             title: () => createLabel(item),

src/Form/FormList.ts

@@ -42,6 +42,7 @@ export default defineComponent({
 
         list.push(
           h(componentsMap[cacheType], {
+            key: `${left}__${right}`,
             modelValue: props.modelValue,
             columns,
             prefix: props.prefix,
@@ -75,6 +76,7 @@ export default defineComponent({
           cacheType && sliceGroup()
           list.push(
             h(ProFormItem, {
+              key: item.prop,
               modelValue: props.modelValue,
               item,
               indexes: props.indexes,

src/Form/GroupForm.ts

@@ -18,13 +18,14 @@ export default defineComponent({
       emit('update:modelValue', value)
     }
 
-    function createDefault(item: GroupFormColumn) {
+    function createDefault(item: GroupFormColumn, index: number) {
       if (item.show === false) return null
 
       return [
         h(
           'div',
           mergeProps(getGroupFormItemBind(item), attrs, {
+            key: item.prop || index,
             class: ['pro-group-form-title', !form?.props.inline && 'el-col-24'],
           }),
           createLabel(item),

src/Form/StepsForm.ts

@@ -65,11 +65,14 @@ export default defineComponent({
           class: ['pro-steps-form', !form?.props.inline && 'el-col-24'],
         }),
         () =>
-          props.columns?.map((item) => {
+          props.columns?.map((item, index) => {
             if (item.show === false) return null
             return h(
               ElStep,
-              mergeProps(getGroupFormItemBind(item), { title: item.label }),
+              mergeProps(getGroupFormItemBind(item), {
+                key: item.prop || index,
+                title: item.label,
+              }),
               { title: () => createLabel(item) },
             )
           }),

src/Form/TabsForm.ts

@@ -28,8 +28,9 @@ export default defineComponent({
         return h(
           ElTabPane,
           mergeProps(getGroupFormItemBind(item), {
+            key: item.prop || index,
             label: item.label,
-            name: item.prop ?? index,
+            name: item.prop || index,
             class: !form?.props.inline && rowClass.value,
             style: !props.inline ? rowStyle.value : null,
           }),

src/InputTag/InputTag.ts

@@ -15,6 +15,7 @@ export function createDefault<
     h(
       ElTag,
       mergeProps(core.tagProps as StringObject, {
+        key: index,
         size: core.size.value,
         closable: core.closable.value,
         class: core.selectedTag.value === index && 'is-selecte',

src/Menu/Menu.ts

@@ -17,20 +17,6 @@ export default defineComponent({
     const route = useRoute()
     const routes = useCurrentRoutes()
 
-    function createDefault(item: RouteRecordRaw) {
-      if (slots.default) {
-        return slots.default(item)
-      } else {
-        return [
-          item.meta?.icon &&
-            h(resolveDynamicComponent(item.meta.icon) as DefineComponent, {
-              class: 'el-icon',
-            }),
-          item.meta?.title && h('span', item.meta.title),
-        ]
-      }
-    }
-
     function hasMultiChild(item: RouteRecordRaw) {
       if (!item.children) return false
 
@@ -47,21 +33,32 @@ export default defineComponent({
       return count >= 2
     }
 
+    function createDefault(item: RouteRecordRaw) {
+      if (slots.default) {
+        return slots.default(item)
+      } else {
+        return [
+          item.meta?.icon &&
+            h(resolveDynamicComponent(item.meta.icon) as DefineComponent, {
+              class: 'el-icon',
+            }),
+          item.meta?.title && h('span', item.meta.title),
+        ]
+      }
+    }
+
     function createList(list?: RouteRecordRaw[]) {
       if (!list) return undefined
-      return list.map((item) => {
+      return list.map((item, index) => {
         const showItem = item && !item.meta?.hidden
 
         if (showItem && !hasMultiChild(item)) {
-          return h(
-            ElMenuItem,
-            { index: item.children?.[0].path || item.path },
-            () => createDefault(item),
-          )
+          const key = item.children?.[0].path || item.path || String(index)
+          return h(ElMenuItem, { key, index: key }, () => createDefault(item))
         } else if (showItem) {
           return h(
             item.meta?.group ? ElMenuItemGroup : ElSubMenu,
-            { index: item.path },
+            { key: item.path || index, index: item.path || index },
             {
               title: () =>
                 createDefault({ meta: item?.meta } as RouteRecordRaw),

src/Radio/Radio.ts

@@ -30,6 +30,7 @@ export function createDefault<T>(
           return h(
             component as DefineComponent,
             {
+              key: getValue(item),
               name: getName(item),
               value: getValue(item),
               disabled: getDisabled(item),

src/Select/Select.ts

@@ -21,6 +21,7 @@ export default defineComponent({
       return h(
         ElOption,
         {
+          key: getValue(item),
           value: getValue(item),
           label: getLabel(item),
           disabled: getDisabled(item),

src/Table/Table.ts

@@ -93,7 +93,11 @@ export default defineComponent({
       if (props.columns) {
         const tableItem = props.columns.map((item) => {
           if (item.hide) return null
-          return h(ProTableItem, { item, size: props.size }, slots)
+          return h(
+            ProTableItem,
+            { item, key: item.prop, size: props.size },
+            slots,
+          )
         })
 
         list = list.concat(tableItem)

src/Table/TableItem.ts

@@ -33,7 +33,11 @@ export default defineComponent({
 
       if (props.item.children && props.item.children.length) {
         const child = (props.item.children as ITableColumns).map((item) => {
-          return h(ProTableItem, { item, size: props.size }, slots)
+          return h(
+            ProTableItem,
+            { item, key: item.prop, size: props.size },
+            slots,
+          )
         })
         list.push(child)
       } else if (slots[`table-${props.item.prop}`]) {

src/TreeSelect/TreeSelect.ts

@@ -88,6 +88,7 @@ export default defineComponent({
     function createList() {
       return list.value.map((item) => {
         return h(ElOption, {
+          key: getValue(item),
           value: getValue(item),
           label: getLabel(item),
           disabled: getDisabled(item),