ant-design / ant-design/pro-components
🐛[BUG] 在ProTable渲染后再声明其rowSelection属性,勾选时最左列的checkbox并未被选中
- 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内容完全一致。
### 📷 复现步骤

### 🏞 期望结果

### 💻 复现代码
```
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
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