解决 Ant desian vue Table select 不能跨页选的问题（Vue3）

Lydia500

已于 2022-10-13 14:03:00 修改

阅读量649

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-09-23 16:52:19 首次发布

本文链接：https://blog.csdn.net/Cavin80/article/details/127014186

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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,
  }
}