React Ant Design 的表格默认选中

网上的文章基本都是错的,都不能解决Ant design表格默认选中问题,网上大多数搜到的文章都是下面这种:

明明 getCheckboxProps 这个就是默认的多选框的配置,怎么 checked 或者 defaultChecked 就不行呢,而 selectedRowKeys 在这里面又不会使用。

在这里插入图片描述

那么 Ant Design 的表格默认选中怎么实现呢?正确的代码如下:

const LinkTable = (props) => {
  const actionRef = useRef();
  const {dispatch} = props;
  const [selectedRowKeys,setSelectedRowKeys] = useState([]);
  const [selectedRowsState,setSelectedRows] = useState([]);

  const columns = [
    {
      title: '菜谱ID',dataIndex: 'id',},{
      title: '菜谱名称',dataIndex: 'name',{
      title: '一级分类',dataIndex: 'type_level1s',{
      title: '二级分类',dataIndex: 'type_level2s',];
  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,}}
        request={(params,sorter,filter) =>
          queryRecipeLink({...params,filter})
        }
        columns={columns}
        rowSelection={{
          type: 'checkbox',selectedRowKeys: selectedRowKeys,onChange: (selectedRowKeys,selectedRows) => {
            setSelectedRowKeys(selectedRowKeys)
            console.log(`selectedRowKeys1: ${selectedRowKeys}`,'selectedRows1: ',selectedRows);
          },}}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,}}
              >
                {selectedRowsState.length}
              </a>{' '}
              项&nbsp;&nbsp;
            </div>
          }
        >
          <Button type="primary">
            <Popconfirm
              title={`确定关联列表选中的${selectedRowsState.length}个菜谱吗?`}
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                handleRelative(selectedRowsState).then(() => {
                  setSelectedRows([]);
                  actionRef.current?.reloadAndRest();
                });
              }}
            >
              <a>批量关联</a>
            </Popconfirm>
          </Button>
        </FooterToolbar>
      )}
    </PageContainer>
  );
};

export default connect(({}) => ({}))(LinkTable);

主要关注 ProTable 标签下 rowSelection 属性就可以了,selectedRowKeys 存放我们需要选中的行的 id,图示如下:

到此我们就完成了 React Ant Design 的表格初始默认选中了。

 

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...