fix: table checkStrictly

components/table/demo/expand-children.vue

@@ -10,21 +10,23 @@ title:
 
 表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置。
 可以通过设置 `indentSize` 以控制每一层的缩进宽度。
-> 注：暂不支持父子数据递归关联选择。
 
 ## en-US
 
 Display tree structure data in Table when there is field key `children` in dataSource, try to customize `childrenColumnName` property to avoid tree table structure.
 You can control the indent width by setting `indentSize`.
-> Note, no support for recursive selection of tree structure data table yet.
 
 </docs>
 
 <template>
+  <a-space align="center" style="margin-bottom: 16px">
+    CheckStrictly:
+    <a-switch v-model:checked="rowSelection.checkStrictly"></a-switch>
+  </a-space>
   <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" />
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 const columns = [
   {
     title: 'Name',
@@ -118,7 +120,8 @@ const data: DataItem[] = [
   },
 ];
 
-const rowSelection = {
+const rowSelection = ref({
+  checkStrictly: false,
   onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
@@ -128,7 +131,7 @@ const rowSelection = {
   onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
     console.log(selected, selectedRows, changeRows);
   },
-};
+});
 
 export default defineComponent({
   setup() {

components/table/hooks/useSelection.tsx

@@ -81,7 +81,11 @@ export default function useSelection<RecordType>(
 ): [TransformColumns<RecordType>, Ref<Set<Key>>] {
   // ======================== Caches ========================
   const preserveRecordsRef = ref(new Map<Key, RecordType>());
-  const mergedRowSelection = computed(() => rowSelectionRef.value || {});
+  const mergedRowSelection = computed(() => {
+    const temp = rowSelectionRef.value || {};
+    const { checkStrictly = true } = temp;
+    return { ...temp, checkStrictly };
+  });
   // ========================= Keys =========================
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
     mergedRowSelection.value.selectedRowKeys ||
@@ -301,7 +305,7 @@ export default function useSelection<RecordType>(
       fixed,
       renderCell: customizeRenderCell,
       hideSelectAll,
-      checkStrictly = true,
+      checkStrictly,
     } = mergedRowSelection.value;
 
     const {
@@ -482,7 +486,7 @@ export default function useSelection<RecordType>(
 
                 // Get range of this
                 if (shiftKey && checkStrictly) {
-                  const pointKeys = new Set([lastSelectedKey, key]);
+                  const pointKeys = new Set([lastSelectedKey.value, key]);
 
                   recordKeys.some((recordKey, recordIndex) => {
                     if (pointKeys.has(recordKey)) {