portable实现多选

全部代码

import ProTable, { ProColumns, TableDropdown, ActionType } from '@ant-design/pro-table';
import React, { useState, useRef, useEffect } from 'react';
import {Input,Button} from 'antd'


const Test = () => {
    const actionRef = useRef();
    const [id,setId]  = useState();       //行号存取的中间参数
    const [selectedRowKeys,setSelectedRowKeys] = useState();  //获取row行号
    const [selectedRows,setSelectRows] = useState();   //获取row行的值
    const [rowData,setRowData] = useState([])   //行内容的存取的中间参数

    const rowSelection = {
        selectedRowKeys,
        onChange:(selectedRowKeys,selectedRows)=>{
            var con = selectedRowKeys
            var tent = selectedRows
            con.concat(id)
            tent.concat(rowData)
            setSelectedRowKeys(con)
            setSelectRows(rowData)
            console.log('row的值=',selectedRowKeys)
            console.log('所选中row的值=',selectedRows)

        }
    }
    return(
        <ProTable
            headerTitle='pro表格'
            columns={columns}
            request={(params, sorter, filter) => {
                console.log('请求的数据=',params, sorter, filter)
            }}
            defaultData={defaultData}
            rowSelection={rowSelection}
            // onRowClick
            onRow = {
                (record,rowKey) => ({
                    
                    onChange:()=>{
                        console.log('获取行的相关信息=',record)
                    // console.log('改之前的id=',id)
                        setRowData(record)
                        setId(rowKey)
                        // console.log('这一行的id=',rowData)
                    }
                
                    
                })
            }
            actionRef={actionRef}
            options={true}
            pagination={{
                defaultCurrent: 10,
                defaultPageSize:10,
                defaultkeyword:3,
            }}
            rowKey={(record,index)=>index}
            expandable={{expandedRowRender}}
        >
        </ProTable>
    )
}

export default Test;

代码解读

const rowSelection = {
        selectedRowKeys,
        selectedRows,
        onChange:(selectedRowKeys,selectedRows)=>{
            var con = selectedRowKeys
            var tent = selectedRows
            ****  //con临时保存更新的所选中的行号
            ****  //tent临时保存更新的所选中行的内容
            ****  //将两者使用usestate的方式保存状态
            con.concat(id)   
            tent.concat(rowData)
            setSelectedRowKeys(con)
            setSelectRows(rowData)
            console.log('row的值=',selectedRowKeys)
            console.log('所选中row的值=',selectedRows)

        }
    }

  

  onRow = {
                  (record,rowKey) => ({
                      onChange:()=>{
                          console.log('获取行的相关信息=',record)
                          
                       ****   //setRowData存入选中行rowData，作为中间变量
                       ****   //setId存入选中行号Id，作为中间变量
                          
                          setRowData(record)
                          setId(rowKey)
                      }
                  })
              }

    rowKey={(record,index)=>index}     //获取行号

    rowSelection={rowSelection}        //一个{}才能执行