react ant ProTable批量選擇表格數據記憶功能

代碼源碼: https://github.com/shengbid/antdpro-demo/tree/main/src/pages/Table/selectTable

如圖: 表格多選后,選擇下一頁,要保留之前選擇的數據

 

代碼

import React, { useState } from 'react'
import type { ProColumns } from '@ant-design/pro-table'
import ProTable from '@ant-design/pro-table';
import { Space } from 'antd'

export type TableListItem = {
  key: number;
  name: string;
  progress: number;
  containers: number;
  callNumber: number;
  creator: string;
  status: string;
  createdAt: number;
  memo: string;
}

const SelectTable: React.FC = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([])

  const getTableData = (params) => {
    const arr = []
    for (let i = 0; i < 5; i += 1) {
      arr.push({
        key: `${params.current}${i}`,
        name: 'AppName',
        containers: Math.floor(Math.random() * 20),
        callNumber: Math.floor(Math.random() * 2000),
        progress: Math.ceil(Math.random() * 100) + 1,
        createdAt: Date.now() - Math.floor(Math.random() * 100000),
        memo: '簡短備注文案',
      });
    }
    return {
      data: arr,
      total: 30,
      status: 'success'
    }
  }

  // 批量刪除
  const batchDelete = () => {
    console.log(selectedRowKeys)
  }
  
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '應用名稱',
      width: 120,
      dataIndex: 'name',
      fixed: 'left',
      render: (_) => <a>{_}</a>,
    },
    {
      title: '容器數量',
      width: 120,
      dataIndex: 'containers',
      align: 'right',
      search: false,
      sorter: (a, b) => a.containers - b.containers,
    },
    {
      title: '調用次數',
      width: 120,
      align: 'right',
      dataIndex: 'callNumber',
    },
    {
      title: '創建時間',
      width: 140,
      key: 'since',
      dataIndex: 'createdAt',
      valueType: 'date',
      sorter: (a, b) => a.createdAt - b.createdAt,
      search: false,
    },
    {
      title: '備注',
      dataIndex: 'memo',
      ellipsis: true,
      copyable: true,
      search: false,
    },
    {
      title: '操作',
      width: 80,
      key: 'option',
      valueType: 'option',
      fixed: 'right',
      render: () => [<a key="link">鏈路</a>],
    },
  ];
  return (
    <>
    <p>批量選擇表格數據,記住分頁的數據,(記住選中數據)</p>
    <ProTable<TableListItem>
      columns={columns}
      rowSelection={{ // 主要是這里的多選處理
        selectedRowKeys,
        onSelect: (record, selected) => {
          // console.log(record, selected)
          let arr = []
          if (selected) { // 如果選中,加入selectedRowKeys
            arr = Array.from(new Set([...selectedRowKeys, record.key]))
          } else { // 如果未選中,刪除這一項數據
            arr = selectedRowKeys.filter(item => {
              return item !== record.key }) } setSelectedRowKeys(arr) } }}
      tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
        <Space size={24}>
          <span>
            已選 {selectedRowKeys.length} 項
            <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
              取消選擇
            </a>
          </span>
        </Space>
      )}
      tableAlertOptionRender={() => {
        return (
          <Space size={16}>
            <a onClick={batchDelete}>批量刪除</a>
            <a>導出數據</a>
          </Space>
        );
      }}
      request={getTableData}
      scroll={{ x: 1300 }}
      options={false}
      search={false}
      rowKey="key"
      headerTitle="批量操作"
      toolBarRender={false}
    />
    </>
  )
}

export default SelectTable