Solve the problem that Ant desian vue Table select cannot select across pages (Vue3)

export interface useSelectVo<T> {
    
    
  onSelect: (record: T, selected: boolean) => void
  onSelectAll: (selected: boolean, selectedRows: T[], changeRows: T[]) => void
  resetSelectKey: () => void
  selectedRecords: Ref<T[]>
  selectedKeys: Ref<Key[]>
}

export const useSelect = <T>(key: Key = 'id'): useSelectVo<T> => {
    
    
  const selectedKeys = ref<Key[]>([])
  const selectedRecords = ref([]) as Ref<T[]>

  const onSelect = (record: T, selected: boolean): void => {
    
    
    selected
      ? selectedRecords.value.push(record)
      : selectedRecords.value.splice(
          selectedRecords.value.findIndex((x: T) => x[key] === record[key]),
          1,
        )
  }

  const onSelectAll = (selected: boolean, selectedRows: T[], changeRows: T[]): void => {
    
    
    selectedRecords.value = selected
      ? selectedRecords.value.concat(changeRows)
      : selectedRecords.value.filter((x: T) => !changeRows.find((i: T) => i[key] === x[key]))
  }

  const resetSelectKey = (): void => {
    
    
    selectedRecords.value = []
    selectedKeys.value = []
  }

  watchEffect(() => {
    
    
    selectedKeys.value = selectedRecords.value.map(i => i[key])
  })

  return {
    
    
    onSelect,
    onSelectAll,
    resetSelectKey,
    selectedRecords,
    selectedKeys,
  }
}