import {Checkbox, Table} from 'antd';
import {PageContainer} from '@ant-design/pro-layout'
import {useEffect, useState} from 'react';
const Index = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
const [selectedRows, setSelectedRows] = useState<any>([]);
const [newData, setNewData] = useState<any>([]);
const [checkedAll, setCheckedAll] = useState<boolean>(false);
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text: string) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [
{
key: '0',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
disabled: false,
},
{
key: '1',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
disabled: false,
},
{
key: '2',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
disabled: false,
},
{
key: '3',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
disabled: true,
},
];
useEffect(() => {
/**过滤disabled为false的数组**/
const afterFliterData: any = data.filter(v => !v.disabled);
setNewData(afterFliterData);
}, []);
/**处理表格选中**/
const handleChange = (SelectvalueKeys: any, SelectRows: any) => {
setSelectedRowKeys([...SelectvalueKeys]);
setSelectedRows([...SelectRows]);
if (newData.length === SelectvalueKeys.length) {
setCheckedAll(true);
}else {
setCheckedAll(false);
}
console.log(SelectvalueKeys, SelectRows, 'aaaa');
};
/**全选处理**/
const selectAll = () => {
// 若已经是全选状态,当再次点击全选按钮的时候,则就执行取消全选操作;
if (newData.length === selectedRows.length) {
handleChange([], []);
setCheckedAll(false);
} else {
// 若不是全选状态,点击全选按钮的时候,就执行全选操作
newData.forEach((v: any, i: any) => {
if (selectedRows.indexOf(v) === -1) {
selectedRowKeys.push(String(i));
setCheckedAll(true);
}
})
handleChange(selectedRowKeys, [...newData]);
}
};
/**表格行是否可选择配置**/
const rowSelection: any = {
selectedRowKeys,
/**隐藏全选勾选框与自定义选择项**/
hideSelectAll: 'true',
onChange: handleChange,
/**选择框的默认属性配置**/
getCheckboxProps: (record: any) => ({
disabled: record.name === 'Disabled User',
}),
};
return (
<PageContainer>
<div className={'container'}>
<div>
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
pagination={false}
/>
<Checkbox checked={checkedAll} onChange={selectAll}>全选</Checkbox>
</div>
</div>
</PageContainer>
)
}
export default Index;
注意:选择后进行操作,完成后清空选择,通过 rowSelection.selectedRowKeys 来控制选中项。
若Table写了rowKey属性,不是全选状态时selectedRowKeys.push();push()为"Table的rowKey"。