antd Table 写一个 多选分页案例

1.案例实现功能: 分页，点击行复选按钮选中，显示信息,等功能

1.先引入我们需要的组件

import React, { useState } from 'react'
import { Table, Modal, Card } from 'antd';
import './index.less'

1.然后开始写表单的column

const column =[
//这里我们只写四个 数据  id 、姓名、骑行状态、还有余额
    {titel:"id",dataIndex:"id"},
    {title:"姓名",dataIndex:"userNmae"},
    {title:"骑行状态",dataIndex:"car"},
    {titel:"余额",dataIndex:"curre"},

]

2.写假数据，这里太麻烦了我直接用for模拟假数据并且添加key值了熬

let dataOr=[] 
//定义一个空的数组用来存放数据

for(let i=0;i<50;i++){
    dataOr.push(
      { id: i, car: `${i % 2 == 0 ? "骑行中" : "未骑行"}`, curre: `${90 + i}`, userName: `叶问${i}`, key: i }
    )
}

//千万不要忘了写key值

3.写导出组件

const App=()=>{

return (
<>
//给table写数据
    <Table 
        columns={columns} 
       dataSource={dataOr}
    >   
    </Table>
</>
 )}

4.使用rowselection 写复选框和其他数据

cosnt rowslection ={
    type:"checkbox" //复选框
     onChange:(selectedKeys,selectedRows)=>{
            console.log('信息',selectedKeys,selectedRows);
            //前一个为选中的数组集合，第二个为选中当前行的对象
         },
         

}
//记得添加到table中

 //<Table  className='table'
            //    columns={columns}
            //    dataSource={dataOr}
            //    rowSelection={RowSelection}
               
          //  >
          //  </Table>

OK现在复选框已经可以用了，我们给他写逻辑，让点击行的时候选中复选框

//实现思想为：我们通过修改selectedKeys 来改变的选项 记得配合onRow

//首先我们使用usestate 创建一个selectedKeys空数组

let [selectedKeys,setSelectedKeys]=useState([])



 //然后我们通过onRow 获得点击的行的数组索引然后添加到刚创建的状态中然后通过修改 selectedRowKeys 
 //实现逻辑现在我们开始代码实现
 
 //创建一个onrow的函数
 
 const onrow =(record, rowIndex)=>{
     //第一个为点击行的所有信息，第二个为可选中行的索引值
     //官方解释为：record 是当前行的数据记录（即行数据），类型为对象。而 rowIndex 是当前行的索引，类型为数字。
     
     onClick:e=>{
         //当点击的时候修改selectedKeys并且刷新组件 即可实现
          setSelectedKeys([...selectedKeys, record.key]);
          
         
     }
 }
  //然后在rowselectedKeys中修改selectedKeys  即可
  
    selectedRowKeys: selectedKeys,
    
  //当然为 了实现逻辑我们还在onchange的事件实现添加选中取消
   onChange: (selectedRowKeys) => {
            setSelectedKeys(selectedRowKeys);
            console.log("我变化了",selectedRowKeys);
          },
 
 
 

补充selectedRowKeys 是 antd Table 组件的一个属性，它用于指定哪些行被选中。

它的类型是一个数组，数组中的每个元素是被选中行的 key 或 index，具体是哪种类型取决于 rowKey 属性的设置。默认情况下，如果没有指定 rowKey，则使用行的索引作为 key。

全部代码如下：

import React, { useState } from 'react'
import { Table, Modal, Card } from 'antd';
import './index.less'
const Tables = () => {

    const columns = [
        { title: "id", dataIndex: "id" },
        { title: "名字", dataIndex: "userName" },
        { title: "骑行状态", dataIndex: "car" },
        { title: "余额", dataIndex: "curre" },
    ]

    let dataOr = []
    for (let i = 0; i < 50; i++) {
        dataOr.push(
            { id: i, car: `${i % 2 == 0 ? "骑行中" : "未骑行"}`, curre: `${90 + i}`, userName: `叶问${i}`, key: i }
        )
    }

    const handleTableChange = (pagination, filters, sorter) => {
        // - 'pagination': 包含当前表格页码和每页显示数量信息的对象。
        // - 'filters': 包含表格筛选信息的对象。
        // - 'sorter': 包含表格排序信息的对象。
        console.log(pagination, filters, sorter);
    };



    const [selectedKeys, setSelectedKeys] = useState([]);
    const RowSelection = {
        type: 'checkbox',
         onChange:(selectedKeys,selectedRows)=>{
            console.log('信息',selectedKeys,selectedRows);
            //前一个为选中的数组集合，第二个为选中当前行的对象
         },
        selectedRowKeys: selectedKeys,

        onChange: (selectedRowKeys) => {
            setSelectedKeys(selectedRowKeys);
            console.log("我变化了",selectedRowKeys);
          },
        

    }
    const  onrow= (record, rowIndex) => {
        return {
            onClick: e => {
                console.log(record, rowIndex);
                setSelectedKeys([...selectedKeys, record.key]); 
            }
        }
    }

    return (
        <Card title ='分页点击表单' className='card'>
            <Table  className='table'
                columns={columns}
                dataSource={dataOr}
                // onChange={handleTableChange}
                rowSelection={RowSelection}
                pagination={{
                    pageSize: 5,
                    // showSizeChanger:true,
                }}
                onRow={onrow}
                
                // style={{ width: 900, }}
            >
            </Table>
        </Card>);
}
export default Tables;