标签：react arr const title ant selectedRowKeys key ProTable Math

代码源码: 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

标签：react,arr,const,title,ant,selectedRowKeys,key,ProTable,Math
来源： https://www.cnblogs.com/steamed-twisted-roll/p/15240408.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。