🐛[BUG] 在ProTable渲染后再声明其rowSelection属性，勾选时最左列的checkbox并未被选中

[AkimotoAkira77]

🐛 bug 描述

在ProTable渲染后再点击按钮“开启勾选”给react hook赋值其rowSelection属性，勾选时最左列的checkbox并未被选中（如果一开始就给到rowSelection属性，则正常），我的Button的onClick事件中给到的rowSelection属性和被注释的rowSelection内容完全一致。

📷 复现步骤

🏞 期望结果

💻 复现代码

import React, { useState, useRef } from 'react'
import { Button, Space, message } from 'antd'
import type { TableProps } from 'antd'
import { ProCard, ProTable } from '@ant-design/pro-components'
import type { ProColumns, ActionType, ProFormInstance } from '@ant-design/pro-components'

type TableRowSelection<T extends object> = TableProps<T>['rowSelection']

interface MyColumn {
  id: string
  name: string
}

const List: React.FC<any> = (props) => {
  const [rowSelection, setRowSelection] = useState<TableRowSelection<MyColumn> | false>(false)
  const [selectedRows, setSelectedRows] = useState<any[]>([])
  const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])
  const contentRef = useRef<any>()
  const proTableFormRef = useRef<ProFormInstance>()

  const tableData = Array.from(Array(100), (v, k) => k).map((item, index) => {
    return {
      id: String(item),
      name: String(item)
    }
  })

  const columns: ProColumns<MyColumn>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: '80px',
      search: false
    },
    {
      title: '名称',
      dataIndex: 'name',
      ellipsis: true,
      key: 'name'
    },
    {
      title: '地址',
      dataIndex: 'name',
      ellipsis: true,
      key: 'name'
    }
  ]

  const actionRef = useRef<ActionType>()

  return (
    <ProCard ghost ref={contentRef} className="h-full">
      <ProTable<MyColumn>
        style={{ paddingTop: '8px' }}
        rowKey="id"
        columns={columns}
        headerTitle={
          <Space>
            <Button
              key="handle"
              type="primary"
              onClick={() => {
                setRowSelection({
                  type: 'checkbox',
                  selectedRowKeys,
                  //全选操作
                  onSelectAll: (selected: any, selectedRowsCurrent: any, changeRows: any) => {
                    console.log(selected, selectedRowsCurrent, changeRows)
                    const realSelected = selectedRowsCurrent.filter((item: any) =>
                      item ? item : false
                    )
                    if (selected) {
                      const uniqueArray = [...selectedRows, ...realSelected].reduce((acc, obj) => {
                        acc[obj.id] = obj
                        return acc
                      }, {})
                      setSelectedRows(Object.values(uniqueArray))
                      setSelectedRowKeys(Object.values(uniqueArray).map((item: any) => item.id))
                    } else {
                      let resultRows = selectedRows
                      changeRows.forEach((element: any, index: number) => {
                        resultRows = resultRows.filter((item) => item.id != element.id)
                        if (index != changeRows.length) {
                          setSelectedRows(resultRows)
                          setSelectedRowKeys(resultRows.map((item: any) => item.id))
                        }
                      })
                    }
                  },
                  //选择和反选操作
                  onSelect: (
                    record: any,
                    selected: any,
                    selectedRowsCurrent: any,
                    nativeEvent: any
                  ) => {
                    if (selected) {
                      setSelectedRows((preData) => [...preData, record])
                      setSelectedRowKeys((preData) => [...preData, record.id])
                    } else {
                      setSelectedRowKeys(selectedRowKeys.filter((item) => item != record.id))
                      setSelectedRows(selectedRows.filter((item) => item.id != record.id))
                    }
                  }
                })
                // actionRef.current?.reload()
              }}
            >
              开启勾选
            </Button>
          </Space>
        }
        formRef={proTableFormRef}
        actionRef={actionRef}
        scroll={{ x: 1200 }}
        rowSelection={
          rowSelection
          // {
          //   type: 'checkbox',
          //   selectedRowKeys,
          //   //全选操作
          //   onSelectAll: (selected: any, selectedRowsCurrent: any, changeRows: any) => {
          //     console.log(selected, selectedRowsCurrent, changeRows)
          //     const realSelected = selectedRowsCurrent.filter((item: any) => (item ? item : false))
          //     if (selected) {
          //       const uniqueArray = [...selectedRows, ...realSelected].reduce((acc, obj) => {
          //         acc[obj.id] = obj
          //         return acc
          //       }, {})
          //       setSelectedRows(Object.values(uniqueArray))
          //       setSelectedRowKeys(Object.values(uniqueArray).map((item: any) => item.id))
          //     } else {
          //       let resultRows = selectedRows
          //       changeRows.forEach((element: any, index: number) => {
          //         resultRows = resultRows.filter((item) => item.id != element.id)
          //         if (index != changeRows.length) {
          //           setSelectedRows(resultRows)
          //           setSelectedRowKeys(resultRows.map((item: any) => item.id))
          //         }
          //       })
          //     }
          //   },
          //   //选择和反选操作
          //   onSelect: (record: any, selected: any, selectedRowsCurrent: any, nativeEvent: any) => {
          //     if (selected) {
          //       setSelectedRows((preData) => [...preData, record])
          //       setSelectedRowKeys((preData) => [...preData, record.id])
          //     } else {
          //       setSelectedRowKeys(selectedRowKeys.filter((item) => item != record.id))
          //       setSelectedRows(selectedRows.filter((item) => item.id != record.id))
          //     }
          //   }
          // }
        }
        options={false}
        dataSource={tableData}
        pagination={{
          defaultPageSize: 10
        }}
      />
      {selectedRows.length > 0 && (
        <div className="w-auto h-[108px] mx-5 flex">
          <div className="flex-1 h-full rounded bg-[#163170] bg-opacity-5 p-4 font-normal text-sm text-[#0D152E] leading-[22px] overflow-y-scroll">
            {selectedRows.length > 0
              ? '已勾选：' + selectedRows.map((item) => item.name).join('，')
              : '未勾选'}
          </div>
        </div>
      )}
    </ProCard>
  )
}

export default List

© 版本信息

• ProComponents 版本: 2.6.43
• vite 版本： 5.0.8
• 浏览器环境 Chrome 123.0.6312.122 （正式版本） 64位
• 开发环境 windows

🚑 其他信息