fix(table): get the selected rows of the table correctly

Author: anncwb

CHANGELOG.zh_CN.md

@@ -13,6 +13,7 @@
 ### 🐛 Bug Fixes
 
 - 修复验证码组件警告问题
+- 修复表格不能正确的获取选中行
 
 ## 2.0.1 (2021-02-21)
 

package.json

@@ -94,7 +94,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.2.2",
+    "typescript": "4.1.5",
     "vite": "2.0.2",
     "vite-plugin-compression": "^0.2.2",
     "vite-plugin-html": "^2.0.2",

src/components/Table/src/BasicTable.vue

@@ -92,6 +92,7 @@
     ],
     setup(props, { attrs, emit, slots }) {
       const tableElRef = ref<ComponentRef>(null);
+      const tableData = ref<Recordable[]>([]);
 
       const wrapRef = ref<Nullable<HTMLDivElement>>(null);
       const innerPropsRef = ref<Partial<BasicTableProps>>();
@@ -120,7 +121,7 @@
         getSelectRowKeys,
         deleteSelectRowByKey,
         setSelectedRowKeys,
-      } = useRowSelection(getProps, emit);
+      } = useRowSelection(getProps, tableData, emit);
 
       const {
         handleTableChange,
@@ -135,6 +136,7 @@
       } = useDataSource(
         getProps,
         {
+          tableData,
           getPaginationInfo,
           setLoading,
           setPagination,

src/components/Table/src/hooks/useCustomRow.ts

@@ -45,7 +45,6 @@ export function useCustomRow(
         if (!key) return;
 
         const isCheckbox = rowSelection.type === 'checkbox';
-
         if (isCheckbox) {
           if (!keys.includes(key)) {
             setSelectedRowKeys([...keys, key]);

src/components/Table/src/hooks/useDataSource.ts

@@ -1,7 +1,17 @@
 import type { BasicTableProps, FetchParams, SorterResult } from '../types/table';
 import type { PaginationProps } from '../types/pagination';
 
-import { ref, unref, ComputedRef, computed, onMounted, watch, reactive } from 'vue';
+import {
+  ref,
+  unref,
+  ComputedRef,
+  computed,
+  onMounted,
+  watch,
+  reactive,
+  Ref,
+  watchEffect,
+} from 'vue';
 
 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 
@@ -17,6 +27,7 @@ interface ActionType {
   setLoading: (loading: boolean) => void;
   getFieldsValue: () => Recordable;
   clearSelectedRowKeys: () => void;
+  tableData: Ref<Recordable[]>;
 }
 
 interface SearchState {
@@ -31,6 +42,7 @@ export function useDataSource(
     setLoading,
     getFieldsValue,
     clearSelectedRowKeys,
+    tableData,
   }: ActionType,
   emit: EmitType
 ) {
@@ -45,6 +57,10 @@ export function useDataSource(
   //   !api && dataSource && (dataSourceRef.value = dataSource);
   // });
 
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef);
+  });
+
   watch(
     () => unref(propsRef).dataSource,
     () => {

src/components/Table/src/hooks/useRowSelection.ts

@@ -1,9 +1,13 @@
 import type { BasicTableProps, TableRowSelection } from '../types/table';
 
-import { computed, ref, unref, ComputedRef } from 'vue';
+import { computed, ref, unref, ComputedRef, Ref, toRaw } from 'vue';
+import { ROW_KEY } from '../const';
 
-/* eslint-disable */
-export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, emit: EmitType) {
+export function useRowSelection(
+  propsRef: ComputedRef<BasicTableProps>,
+  tableData: Ref<Recordable[]>,
+  emit: EmitType
+) {
   const selectedRowKeysRef = ref<string[]>([]);
   const selectedRowRef = ref<Recordable[]>([]);
 
@@ -27,8 +31,26 @@ export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, emit: Em
     };
   });
 
+  const getAutoCreateKey = computed(() => {
+    return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
+  });
+
+  const getRowKey = computed(() => {
+    const { rowKey } = unref(propsRef);
+    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
+  });
+
   function setSelectedRowKeys(rowKeys: string[]) {
     selectedRowKeysRef.value = rowKeys;
+
+    const rows = toRaw(unref(tableData)).filter((item) =>
+      rowKeys.includes(item[unref(getRowKey) as string])
+    );
+    selectedRowRef.value = rows;
+  }
+
+  function setSelectedRows(rows: Recordable[]) {
+    selectedRowRef.value = rows;
   }
 
   function clearSelectedRowKeys() {
@@ -65,5 +87,6 @@ export function useRowSelection(propsRef: ComputedRef<BasicTableProps>, emit: Em
     setSelectedRowKeys,
     clearSelectedRowKeys,
     deleteSelectRowByKey,
+    setSelectedRows,
   };
 }

src/components/Table/src/hooks/useTable.ts

@@ -3,7 +3,7 @@ import type { PaginationProps } from '../types/pagination';
 import type { DynamicProps } from '/@/types/utils';
 import { getDynamicProps } from '/@/utils';
 
-import { ref, onUnmounted, unref, watch } from 'vue';
+import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { isInSetup } from '/@/utils/helper/vueHelper';
 import { error } from '/@/utils/log';
@@ -77,11 +77,11 @@ export function useTable(
       getTableInstance().setLoading(loading);
     },
     getDataSource: () => {
-      return getTableInstance().getDataSource();
+      return toRaw(getTableInstance().getDataSource());
     },
     getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
       const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
-      return columns;
+      return toRaw(columns);
     },
     setColumns: (columns: BasicColumn[]) => {
       getTableInstance().setColumns(columns);
@@ -96,10 +96,10 @@ export function useTable(
       getTableInstance().deleteSelectRowByKey(key);
     },
     getSelectRowKeys: () => {
-      return getTableInstance().getSelectRowKeys();
+      return toRaw(getTableInstance().getSelectRowKeys());
     },
     getSelectRows: () => {
-      return getTableInstance().getSelectRows();
+      return toRaw(getTableInstance().getSelectRows());
     },
     clearSelectedRowKeys: () => {
       getTableInstance().clearSelectedRowKeys();
@@ -111,16 +111,16 @@ export function useTable(
       return getTableInstance().getPaginationRef();
     },
     getSize: () => {
-      return getTableInstance().getSize();
+      return toRaw(getTableInstance().getSize());
     },
     updateTableData: (index: number, key: string, value: any) => {
       return getTableInstance().updateTableData(index, key, value);
     },
     getRowSelection: () => {
-      return getTableInstance().getRowSelection();
+      return toRaw(getTableInstance().getRowSelection());
     },
     getCacheColumns: () => {
-      return getTableInstance().getCacheColumns();
+      return toRaw(getTableInstance().getCacheColumns());
     },
     getForm: () => {
       return (unref(formRef) as unknown) as FormActionType;
@@ -129,7 +129,7 @@ export function useTable(
       getTableInstance().setShowPagination(show);
     },
     getShowPagination: () => {
-      return getTableInstance().getShowPagination();
+      return toRaw(getTableInstance().getShowPagination());
     },
   };
 

yarn.lock

@@ -8610,10 +8610,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.2.2.tgz#1450f020618f872db0ea17317d16d8da8ddb8c4c"
-  integrity sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==
+typescript@4.1.5:
+  version "4.1.5"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72"
+  integrity sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==
 
 uglify-js@^3.1.4:
   version "3.12.5"