生成测试数据效果图（如下）
代码（copy可执行）
import { Table } from "antd";
import { useState, useEffect } from "react";
/**
* 休假管理系统- 用于展示员工休假申请的操作记录
*/
// 改进：定义接口
interface OperationLog {
id: string;
operation_type: string;
operator_id: string;
operation_time: string;
operation_details: string;
}
// 生成测试数据的函数
const generateMockData = () => {
const mockData = [];
// 休假操作类型枚举
const leaveOperations = ['提交休假申请', '审批通过', '审批驳回', '休假取消', '休假调整'];
// 员工信息 - 使用工号代替真实姓名
const employees = ['EMP001', 'EMP002', 'EMP003', 'EMP004', 'EMP005'];
//关键点
for (let i = 1; i <= 35; i++) {
const operationType = leaveOperations[i % leaveOperations.length];
const employee = employees[i % employees.length];
mockData.push({
id: `record-${i}`,
operation_type: operationType,
operator_id: employee,
operation_time: new Date(Date.now() - i * 3600000).toISOString(),
operation_details: `详细信息${i}`
});
}
return mockData;
};
export default function LeaveOperationLog() {
const [tableParams, setTableParams] = useState({ limit: 10, offset: 0 });
const [mockDataSource, setMockDataSource] = useState<OperationLog[]>([]);
// 在组件挂载时生成测试数据
useEffect(() => {
setMockDataSource(generateMockData());
}, []);
// 分页配置
const pagination = {
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: [10, 20, 50, 100],
total: mockDataSource.length,
showTotal: (total: number) => `共${total}条休假操作记录`,
current: Math.floor(tableParams.offset / tableParams.limit) + 1,
pageSize: tableParams.limit,
onChange: (page: number, pageSize: number) => {
const newParams = {
limit: pageSize,
offset: (page - 1) * pageSize
};
setTableParams(newParams);
}
};
return (
<>
<div style={{
marginBottom: 16,
padding: 12,
backgroundColor: '#e6f7ff',
borderRadius: 6,
border: '1px solid #91d5ff'
}}>
<span>📊 当前显示休假操作记录（测试数据共35条），用于验证系统分页功能</span>
</div>
<Table
rowKey='id'
columns={ColumnsDetail}
pagination={pagination}
expandable={{
expandedRowRender: record => (
<div style={{ margin: 0, padding: '8px 0', lineHeight: '1.6' }}>
<strong>操作详情：</strong>
{record.operation_details}
</div>
),
}}
dataSource={mockDataSource.slice(
tableParams.offset,
tableParams.offset + tableParams.limit
)}
/>
</>
);
}
// 后的列配置 - 休假管理系统专用
export const ColumnsDetail = [
{
title: '操作类型',
dataIndex: 'operation_type',
key: 'operation_type',
render: (text: string) => {
const colorMap = {
'提交休假申请': 'blue',
'审批通过': 'green',
'审批驳回': 'red',
'休假取消': 'orange',
'休假调整': 'purple'
};
return <span style={{ color: colorMap[text] || '#000' }}>{text}</span>;
}
},
{
title: '操作人工号',
dataIndex: 'operator_id',
key: 'operator_id',
render: (text: string) => <code>{text}</code>
},
{
title: '操作时间',
dataIndex: 'operation_time',
key: 'operation_time',
render: (text: string) => new Date(text).toLocaleString('zh-CN')
},
{
title: '操作摘要',
dataIndex: 'operation_details',
key: 'operation_details',
ellipsis: true,
render: (text: string) => text.length > 30 ? `${text.substring(0, 30)}...` : text
},
];
代码片段其他亮点
- 分页
- table列表中的唯一id
for循环跑出来的数据（不重要-想看就过一眼）
[
{
"id": "record-1",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-14T08:04:40.093Z",
"operation_details": "详细信息1"
},
{
"id": "record-2",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-14T07:04:40.093Z",
"operation_details": "详细信息2"
},
{
"id": "record-3",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-14T06:04:40.093Z",
"operation_details": "详细信息3"
},
{
"id": "record-4",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-14T05:04:40.093Z",
"operation_details": "详细信息4"
},
{
"id": "record-5",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-14T04:04:40.093Z",
"operation_details": "详细信息5"
},
{
"id": "record-6",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-14T03:04:40.093Z",
"operation_details": "详细信息6"
},
{
"id": "record-7",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-14T02:04:40.093Z",
"operation_details": "详细信息7"
},
{
"id": "record-8",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-14T01:04:40.093Z",
"operation_details": "详细信息8"
},
{
"id": "record-9",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-14T00:04:40.093Z",
"operation_details": "详细信息9"
},
{
"id": "record-10",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-13T23:04:40.093Z",
"operation_details": "详细信息10"
},
{
"id": "record-11",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-13T22:04:40.093Z",
"operation_details": "详细信息11"
},
{
"id": "record-12",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-13T21:04:40.093Z",
"operation_details": "详细信息12"
},
{
"id": "record-13",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-13T20:04:40.093Z",
"operation_details": "详细信息13"
},
{
"id": "record-14",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-13T19:04:40.093Z",
"operation_details": "详细信息14"
},
{
"id": "record-15",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-13T18:04:40.093Z",
"operation_details": "详细信息15"
},
{
"id": "record-16",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-13T17:04:40.093Z",
"operation_details": "详细信息16"
},
{
"id": "record-17",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-13T16:04:40.093Z",
"operation_details": "详细信息17"
},
{
"id": "record-18",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-13T15:04:40.093Z",
"operation_details": "详细信息18"
},
{
"id": "record-19",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-13T14:04:40.093Z",
"operation_details": "详细信息19"
},
{
"id": "record-20",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-13T13:04:40.093Z",
"operation_details": "详细信息20"
},
{
"id": "record-21",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-13T12:04:40.093Z",
"operation_details": "详细信息21"
},
{
"id": "record-22",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-13T11:04:40.093Z",
"operation_details": "详细信息22"
},
{
"id": "record-23",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-13T10:04:40.093Z",
"operation_details": "详细信息23"
},
{
"id": "record-24",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-13T09:04:40.093Z",
"operation_details": "详细信息24"
},
{
"id": "record-25",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-13T08:04:40.093Z",
"operation_details": "详细信息25"
},
{
"id": "record-26",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-13T07:04:40.093Z",
"operation_details": "详细信息26"
},
{
"id": "record-27",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-13T06:04:40.093Z",
"operation_details": "详细信息27"
},
{
"id": "record-28",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-13T05:04:40.093Z",
"operation_details": "详细信息28"
},
{
"id": "record-29",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-13T04:04:40.093Z",
"operation_details": "详细信息29"
},
{
"id": "record-30",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-13T03:04:40.093Z",
"operation_details": "详细信息30"
},
{
"id": "record-31",
"operation_type": "审批通过",
"operator_id": "EMP002",
"operation_time": "2025-11-13T02:04:40.093Z",
"operation_details": "详细信息31"
},
{
"id": "record-32",
"operation_type": "审批驳回",
"operator_id": "EMP003",
"operation_time": "2025-11-13T01:04:40.093Z",
"operation_details": "详细信息32"
},
{
"id": "record-33",
"operation_type": "休假取消",
"operator_id": "EMP004",
"operation_time": "2025-11-13T00:04:40.093Z",
"operation_details": "详细信息33"
},
{
"id": "record-34",
"operation_type": "休假调整",
"operator_id": "EMP005",
"operation_time": "2025-11-12T23:04:40.093Z",
"operation_details": "详细信息34"
},
{
"id": "record-35",
"operation_type": "提交休假申请",
"operator_id": "EMP001",
"operation_time": "2025-11-12T22:04:40.093Z",
"operation_details": "详细信息35"
}
]
