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

原创于 2022-03-01 11:14:56 发布 · 674 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #reactjs

React 专栏收录该内容

16 篇文章

订阅专栏

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

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版本不难就自己写吧，解决了您的问题，点个赞哈，祝好