fix: table rowSelection deep watch #4889

close #4889

components/table/Table.tsx

@@ -35,7 +35,7 @@ import defaultLocale from '../locale/en_US';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
 import type { PropType } from 'vue';
-import { reactive, ref, computed, defineComponent, toRef, watchEffect } from 'vue';
+import { reactive, ref, computed, defineComponent, toRef, watchEffect, watch } from 'vue';
 import type { DefaultRecordType } from '../vc-table/interface';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -487,11 +487,16 @@ const InteralTable = defineComponent<
       }
       return props.expandIconColumnIndex;
     });
-
+    const rowSelection = ref();
+    watch(
+      () => props.rowSelection,
+      () => {
+        rowSelection.value = { ...props.rowSelection };
+      },
+      { deep: true },
+    );
     // ========================== Selections ==========================
-    const [transformSelectionColumns, selectedKeySet] = useSelection(
+    const [transformSelectionColumns, selectedKeySet] = useSelection(rowSelection, {
-      computed(() => props.rowSelection),
-      {
       prefixCls,
       data: mergedData,
       pageData,
@@ -502,8 +507,7 @@ const InteralTable = defineComponent<
       locale: tableLocale,
       expandIconColumnIndex,
       getPopupContainer: computed(() => props.getPopupContainer),
-      },
+    });
-    );
 
     const internalRowClassName = (record: any, index: number, indent: number) => {
       let mergedRowClassName;

components/table/hooks/useLazyKVMap.ts

@@ -39,7 +39,7 @@ export default function useLazyKVMap<RecordType>(
       };
     },
     {
-      deep: false,
+      deep: true,
       immediate: true,
     },
   );