ant-design / ant-design/pro-components

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

Open
#8,322 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

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

### 📷 复现步骤

![876eee46c926d84812e4cc57938c5ed](https://github.com/ant-design/pro-components/assets/32770514/72b7e67d-1afb-414b-bdf9-65cc77a8ccf7)
### 🏞 期望结果

![e31c5f537dbc7eac0631b6f03958dba](https://github.com/ant-design/pro-components/assets/32770514/b56f8039-98c7-408a-9e27-d8d644a7bf01)

### 💻 复现代码

```
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 = TableProps['rowSelection']

interface MyColumn {
id: string
name: string
}

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

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

const columns: ProColumns[] = [
{
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()

return (


style={{ paddingTop: '8px' }}
rowKey="id"
columns={columns}
headerTitle={

{
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()
}}
>
开启勾选


}
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 && (



{selectedRows.length > 0
? '已勾选:' + selectedRows.map((item) => item.name).join(',')
: '未勾选'}


)}

)
}

export default List
```

### © 版本信息

- ProComponents 版本: 2.6.43
- vite 版本: 5.0.8
- 浏览器环境 Chrome 123.0.6312.122 (正式版本) 64位
- 开发环境 windows

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

The payload names no repository file or test; start with the supplied React reproduction and inspect ProTable's rowSelection handling when it changes from false after rendering. Verify the behavior against the reported ProComponents 2.6.43 setup, then confirm that enabling selection dynamically makes the left checkbox reflect subsequent selections.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.