antd table的默认选择（Do not set ‘checked‘ or ‘defalutChecked‘ in ‘getCheckboxProps’...解决方法）

最新推荐文章于 2023-08-31 10:33:22 发布

m0_73726304

最新推荐文章于 2023-08-31 10:33:22 发布

阅读量933

点赞数

文章标签：前端框架 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73726304/article/details/129183100

版权

在Ant Design的Table组件中遇到getCheckboxProps内设置checked或defaultChecked导致错误的问题。解决方案是利用useState创建selectedRowKeys状态，并通过rowSelection对象的onChange回调更新选择状态，从而实现表格行选择控制。

摘要由CSDN通过智能技术生成

在getCheckboxProps里设置checked报错，不能成功。

解决办法参考:(来自chatgpt）

import { useState } from 'react';
import { Table } from 'antd';

const dataSource = [
  {
    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',
  },
];

const App = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      setSele