<Table
columns={tableColumns(batchDeduct)}
loading={isLoading}
//表格是否为多选
rowSelection={rowSelection}
//表格的页码
pagination={pagination}
//表格的数据
dataSource={dataSource}
//表格的页码改变(分页时)调用函数,把参数传给后端
paginationChange={onPaginationChange}
//每一个表格的key值
setRowKey={(record) => {
return record.Id;
}}
/>
const [pagination, setPagination] = useState<PaginationProps>({
current: 1,
total: 0,
pageSize: 10,
showTotal: (total: number) => {
return `共 ${total} 条记录`;
}
});
const [selectedRowKeys, setSelectRowKeys] = useState<React.Key[]>([]);
const onPaginationChange = (pageNum: number, pageSize?: number) => {
setPagination((pagination) => ({ ...pagination, current: pageNum, pageSize }));
getList({ pageNum, pageSize });
};
const onSelectChange = (selectedRowKeys: React.Key[], selectedRows: DeductProps[]) => {
setSelectRowKeys(selectedRowKeys);
console.log(selectedRows);
};
// 表格RowSelection配置项
const rowSelection = {
//是否全选
hideSelectAll: false,
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: React.Key[], selectedRows: DeductProps[]) => {
//selectedRowKeys:表示Id值,唯一的,selectedRows:整行的数据
onSelectChange(selectedRowKeys, selectedRows);
},
//getCheckboxProps 这个方法是表格有一些行禁止多选,通过disabled来判断
getCheckboxProps: (record: DeductProps) => {
return {
//false表示全部可以选择,有禁止选择以函数形式判断
disabled: false,
name: record.name
};
}
};