antdv复选框,实现点击表格当前行选中或取消

实现点击表格当前行选中或取消，可以通过以下步骤实现：

1. 在表格的 columns 中添加一个 render 函数，用于渲染复选框列。render 函数需要返回一个 antdv 的 Checkbox 组件，并设置其 checked 属性为当前行是否选中的状态。

2. 在表格的 rowSelection 对象中，设置 onChange 回调函数。该回调函数会在复选框选中或取消选中时触发。在该回调函数中，可以获取到当前选中的行的 key 值，然后将其保存到一个数组中。

3. 在表格的 onRow 属性中，设置一个 onClick 回调函数。该回调函数会在当前行被点击时触发。在该回调函数中，可以根据当前行的 key 值来判断该行是否被选中，如果已经被选中，则取消选中；否则选中该行。

完整代码如下：

import React, { useState } from 'react';
import { Table, Checkbox } from 'antd';

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

export default function App() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  const onRowClick = (record) => {
    const key = record.key;
    const index = selectedRowKeys.indexOf(key);
    if (index > -1) {
      setSelectedRowKeys([...selectedRowKeys.slice(0, index), ...selectedRowKeys.slice(index + 1)]);
    } else {
      setSelectedRowKeys([...selectedRowKeys, key]);
    }
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '',
      key: 'selection',
      render: (_, record) => (
        <Checkbox checked={selectedRowKeys.includes(record.key)} />
      ),
    },
  ];

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <Table
      dataSource={data}
      columns={columns}
      rowSelection={rowSelection}
      onRow={(record) => ({
        onClick: () => onRowClick(record),
      })}
    />
  );
}