React AntD 表格查看修改时默认选中几行数据

yusirxiaer

于 2022-03-01 11:14:56 发布

阅读量658

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js 前端 reactjs

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/123201143

React 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在Ant Design的Table组件中初始化并设置默认选中行，通过useState管理selectedRowKeys，并在rowSelection属性中配置。同时，通过getCheckboxProps实现表格行的禁用功能。onChange回调用于更新selectedRowKeys和selectedRows状态，确保选中状态的同步。

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

hook定义selectedRowKeys

const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRowsState, setSelectedRows] = useState([]);

初始化时利用setSelectedRowKeys给selectedRowKeys塞值,时行数据的rowKey的数组。

设置table属性rowSelection

    <Table
        rowKey="id"
        columns={columns}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys, // selectedRowKeys: selectedRowKeys的简写
          onChange: (selectedRowKeys, selectedRows) => {
            console.log('selectedRowKeys:',selectedRowKeys, 'selectedRows: ', selectedRows);
            setSelectedRowKeys(selectedRowKeys);
            setSelectedRows(selectedRows);
          },
        }}
      />

selectedRowKeys与onChange来实现默认选中行

设置表格disable使用getCheckboxProps设置

ts版本不难就自己写吧，解决了您的问题，点个赞哈，祝好