表格点击当前行的勾选按钮后,点击分页之后勾选的状态仍然保存。

最新推荐文章于 2024-02-02 22:16:34 发布

hardwork come on

最新推荐文章于 2024-02-02 22:16:34 发布

阅读量214

点赞数

分类专栏： react 文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/weixin_43353869/article/details/126448851

版权

react 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

主要是利用

rowSelection配置项中的onSelect,onSelectAll 回调

在这里插入图片描述

下面是用ts写完整的代码

/**
 * @description 表格选择行配置项
 */
export const useRowSelection = <T>() => {
  const [checkedRowKeys, setCheckedRowKeys] = useState<Key[]>([])
  const [checkedRows, setCheckedRows] = useState<T[]>([])

  const rowSelection: TableRowSelection<T> | undefined = {
    selectedRowKeys: checkedRowKeys,
    fixed: true,
    onSelect: (record, selected, selectedRow) => {
      if (selected) {
        // 添加
        // @ts-ignore
        setCheckedRowKeys([...checkedRowKeys, record.accountsOrder])
        setCheckedRows([...checkedRows, record])
      } else {
        // @ts-ignore
        const subCheckedKeys = checkedRowKeys.filter((item: Key) => item !== record.accountsOrder)
        // @ts-ignore
        const subCheckedRows = checkedRows.filter((item: T) => item.accountsOrder !== record.accountsOrder)
        setCheckedRowKeys(subCheckedKeys)
        setCheckedRows(subCheckedRows)
      }
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      if (selected) {
        const addCheckedKeys = changeRows.map((item: T) => {
          // @ts-ignore
          return item.accountsOrder
        })
        setCheckedRowKeys([...checkedRowKeys, ...addCheckedKeys])
        setCheckedRows([...checkedRows, ...changeRows])
      } else {
        const subCheckedKeys = checkedRowKeys.filter((ite: Key) => {
          return !changeRows.some((item: T) => {
            // @ts-ignore
            return item.accountsOrder === ite
          })
        })
        const subCheckedRows = checkedRows.filter((ite: any) => {
          return !changeRows.some((item: T) => {
            // @ts-ignore
            return item.accountsOrder === ite.accountsOrder
          })
        })
        setCheckedRowKeys(subCheckedKeys)
        setCheckedRows(subCheckedRows)
      }
    },
    columnWidth: 64,
    // selections: [
    //   Table.SELECTION_ALL,
    //   Table.SELECTION_INVERT,
    //   Table.SELECTION_NONE
    // ],
    type: 'checkbox'
  }

  return {
    checkedRowKeys,
    checkedRows,
    setCheckedRowKeys,
    setCheckedRows,
    rowSelection
  }
}