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

原创已于 2022-10-13 14:03:00 修改 · 781 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

前端专栏收录该内容

21 篇文章

订阅专栏

这个博客内容展示了如何在Vue应用中利用自定义的useSelect Hooks来处理表格选择操作。useSelectVo接口定义了onSelect、onSelectAll和resetSelectKey等方法，用于单选和全选记录，并维护已选中的记录和keys状态。同时，博客还介绍了watchEffect的使用，以确保selectedKeys与selectedRecords的同步更新。

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