antd表格切换分页页码时之前的选择项仍然保留问题解决

本文详细介绍了如何使用Ant Design库中的TableRowSelection配置项来实现表格的行选择功能,包括单选和全选操作。代码示例中展示了onSelect和onSelectAll回调的用法,用于管理已选中的行键和行数据,并提供了筛选和更新选中状态的逻辑。
摘要由CSDN通过智能技术生成

!!! 主要是利用rowSelection配置项中的onSelect,onSelectAll 回调,代码如下

/**
 * @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
  }
}


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用的是 antd 的 Table 组件,可以通过以下步骤来实现在分页切换保留之前的选中项: 1. 在 Table 组件中,设置 rowSelection 属性,该属性用于控制行选择功能。 2. 在 rowSelection 中,设置 selectedRowKeys 属性,该属性用于存储当前选中的行的 key 值。 3. 在 onChange 回调函数中,通过参数 pagination 获取当前的分页信息,并将 selectedRowKeys 存储到 state 中。 4. 在 render 中,通过 state 中的 selectedRowKeys 属性,将之前选中的行重新选中。 下面是一个示例代码: ``` class MyTable extends React.Component { state = { selectedRowKeys: [], // 存储当前选中的行的 key 值 }; onSelectChange = selectedRowKeys => { // 更新选中的行 this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const dataSource = [ { key: '1', name: 'Mike' }, { key: '2', name: 'John' }, { key: '3', name: 'Lucy' }, { key: '4', name: 'Tom' }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, ]; return ( <Table rowSelection={rowSelection} dataSource={dataSource} columns={columns} pagination={{ pageSize: 2, onChange: (page, pageSize) => { // 获取当前分页的选中行 const { selectedRowKeys } = this.state; // 更新分页信息 this.setState({ selectedRowKeys: [], }); }, }} /> ); } } ``` 在上面的代码中,我们定义了一个 Table 组件,该组件包含一个 rowSelection 属性,用于控制行选择功能。在 onChange 回调函数中,我们获取当前的分页信息,并将之前选中的行存储到 state 中。在 render 中,我们通过 state 中的 selectedRowKeys 属性,将之前选中的行重新选中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值