From 601368921f075aa1870d1c3ce8f4a8330260206a Mon Sep 17 00:00:00 2001 From: Vben Date: Wed, 24 Feb 2021 23:31:39 +0800 Subject: [PATCH] fix(table): get the selected rows of the table correctly --- CHANGELOG.zh_CN.md | 1 + package.json | 2 +- src/components/Table/src/BasicTable.vue | 4 ++- .../Table/src/hooks/useCustomRow.ts | 1 - .../Table/src/hooks/useDataSource.ts | 18 +++++++++++- .../Table/src/hooks/useRowSelection.ts | 29 +++++++++++++++++-- src/components/Table/src/hooks/useTable.ts | 18 ++++++------ yarn.lock | 8 ++--- 8 files changed, 61 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 5b45726b..f3c35ea4 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -13,6 +13,7 @@ ### 🐛 Bug Fixes - 修复验证码组件警告问题 +- 修复表格不能正确的获取选中行 ## 2.0.1 (2021-02-21) diff --git a/package.json b/package.json index f085da91..5c6abeee 100644 --- a/package.json +++ b/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", diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue index 98c1c2bb..c1655457 100644 --- a/src/components/Table/src/BasicTable.vue +++ b/src/components/Table/src/BasicTable.vue @@ -92,6 +92,7 @@ ], setup(props, { attrs, emit, slots }) { const tableElRef = ref(null); + const tableData = ref([]); const wrapRef = ref>(null); const innerPropsRef = ref>(); @@ -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, diff --git a/src/components/Table/src/hooks/useCustomRow.ts b/src/components/Table/src/hooks/useCustomRow.ts index c1c4d372..e2027e9f 100644 --- a/src/components/Table/src/hooks/useCustomRow.ts +++ b/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]); diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts index c1f1b05b..38267fe2 100644 --- a/src/components/Table/src/hooks/useDataSource.ts +++ b/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; } 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, () => { diff --git a/src/components/Table/src/hooks/useRowSelection.ts b/src/components/Table/src/hooks/useRowSelection.ts index ba373f78..45c46e31 100644 --- a/src/components/Table/src/hooks/useRowSelection.ts +++ b/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, emit: EmitType) { +export function useRowSelection( + propsRef: ComputedRef, + tableData: Ref, + emit: EmitType +) { const selectedRowKeysRef = ref([]); const selectedRowRef = ref([]); @@ -27,8 +31,26 @@ export function useRowSelection(propsRef: ComputedRef, 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, emit: Em setSelectedRowKeys, clearSelectedRowKeys, deleteSelectRowByKey, + setSelectedRows, }; } diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts index 634da3f3..478b66a7 100644 --- a/src/components/Table/src/hooks/useTable.ts +++ b/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()); }, }; diff --git a/yarn.lock b/yarn.lock index 62e63b22..5107de1d 100644 --- a/yarn.lock +++ b/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" -- GitLab