antd使用hooks进行antd table的选择框如何默认选中，antd table的选择框rowSelection的使用，使用checked报错

最新推荐文章于 2024-03-21 19:30:03 发布

原创最新推荐文章于 2024-03-21 19:30:03 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #javascript

antd 专栏收录该内容

5 篇文章

订阅专栏

博客主要围绕antd table的选择框选择展开。介绍了rowSelection可进行多个方法配置，getCheckboxProps用于选择框默认属性配置，但不能设置默认选中。还给出解决默认选中问题的方法，如设置默认初始值、在onChange中赋值等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd table的选择框选择

1.rowSelection为选择功能的配置，rowSelection可以进行多个方法的配置
在这里插入图片描述
1.官方写法：


 const onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
  };
  const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
    };

 <Table  rowSelection={{...rowSelection}} columns={columns} dataSource={data} />

！！！就出现如下表单具有选择框的表格↓
在这里插入图片描述
2.getCheckboxProps选择框的默认属性配置，可以用来设置表格某列默认被禁用，但是不能设置默认被选中

 const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
       getCheckboxProps: record => ({
      //默认禁用某列
      disabled: record.name === 'Disabled User',
     name: record.name,
   }),
    };

在这里插入图片描述
!注意getCheckboxProps中的disable不能替换为checked和getCheckboxProps（选中），会报错误

解决方法:
1.设置默认初始值
2.onChange中 setNongId(record)赋值
3.

  //设置默认初始值
  const [nongId,setNongId] = useState(['3'])
  const rowSelection = {
    //默认选中
    selectedRowKeys:nongId,
    onChange: (record,selectedRowKeys, selectedRows) => {
      console.log(record,selectedRowKeys,'selectedRows');
      setNongId(record)
    },
    //默认禁止某列
    getCheckboxProps: (record) => ({
        disabled: record.name === 'Disabled User',
         name: record.name,
    }),
  }
    return (
        <div>
             <Table  rowSelection={{...rowSelection}} columns={columns} dataSource={data} />
        </div>
    )