diff --git a/.changeset/curly-pans-matter.md b/.changeset/curly-pans-matter.md new file mode 100644 index 000000000..13daad767 --- /dev/null +++ b/.changeset/curly-pans-matter.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(table): 修复全选时 onChange 第 4 个参数返回 undefined 问题 diff --git a/.changeset/lucky-plums-greet.md b/.changeset/lucky-plums-greet.md new file mode 100644 index 000000000..f0cf41e21 --- /dev/null +++ b/.changeset/lucky-plums-greet.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": patch +--- + +fix: 修复全选时 onChange 第 4 个参数返回 undefined 问题 diff --git a/packages/ui/table/src/hooks/use-check.ts b/packages/ui/table/src/hooks/use-check.ts index 732b28998..97634cd7f 100644 --- a/packages/ui/table/src/hooks/use-check.ts +++ b/packages/ui/table/src/hooks/use-check.ts @@ -1,5 +1,5 @@ import { useCheck } from '@hi-ui/use-check' -import React from 'react' +import React, { useEffect } from 'react' import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state' import { FlattedTableRowData, TableRowSelection } from '../types' @@ -30,6 +30,12 @@ export const useTableCheck = ({ rowSelection?.onChange ) + useEffect(() => { + checkedRowDataItemsRef.current = checkedRowDataItemsRef.current.filter(({ key }) => + checkedRowKeys?.includes(key) + ) + }, [checkedRowKeys]) + // 已选中的行数据集合 const checkedRowDataItemsRef = React.useRef[]>([]) const checkedRowDataItems = checkedRowDataItemsRef.current @@ -47,7 +53,9 @@ export const useTableCheck = ({ const onCheckedRowKeysChange = React.useCallback( (rowItem: Record, checked: boolean) => { // 记录选中的行数据集合 - const nextCheckedDataItems = checkedRowDataItems + const nextCheckedDataItems = checkedRowDataItems.filter(({ key }) => + checkedRowKeys.includes(key) + ) if (checked) { if (!nextCheckedDataItems.find((item) => item[fieldKey] === rowItem[fieldKey])) { @@ -61,7 +69,7 @@ export const useTableCheck = ({ handleCheckedRowKeysChange(rowItem, checked) }, - [checkedRowDataItems, fieldKey, handleCheckedRowKeysChange] + [checkedRowDataItems, checkedRowKeys, fieldKey, handleCheckedRowKeysChange] ) // 判断是否全选 @@ -101,15 +109,25 @@ export const useTableCheck = ({ const checkedRowKeysSet = new Set(checkedRowKeys) if (checkedAll) { + checkedRowDataItemsRef.current = checkedRowDataItemsRef.current.filter( + ({ key }) => !checkedRowKeysSet.has(key) + ) + // 移除当前页所有行 ids trySetCheckedRowKeys( (prev) => prev.filter((id) => !checkedRowKeysSet.has(id)), targetRowItems, - false + false, + checkedRowDataItemsRef.current ) + return } + checkedRowDataItemsRef.current = targetRowItems.concat( + checkedRowDataItemsRef.current.filter((item) => !checkedRowKeysSet.has(item.key)) + ) + trySetCheckedRowKeys( // 添加当前页所有行 ids (prev) => { @@ -117,7 +135,8 @@ export const useTableCheck = ({ return Array.from(checkedRowKeysSet) }, targetRowItems, - true + true, + checkedRowDataItemsRef.current ) }, [trySetCheckedRowKeys, flattedData, checkRowIsDisabledCheckbox, checkedAll])