Open AkimotoAkira77 opened 3 weeks ago
在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
🐛 bug 描述
在ProTable渲染后再点击按钮“开启勾选”给react hook赋值其rowSelection属性,勾选时最左列的checkbox并未被选中(如果一开始就给到rowSelection属性,则正常),我的Button的onClick事件中给到的rowSelection属性和被注释的rowSelection内容完全一致。
📷 复现步骤
🏞 期望结果
💻 复现代码
© 版本信息
🚑 其他信息