import React, {useState} from 'react';
import {Button, Space, Table} from 'antd';
import ProTable from '@ant-design/pro-table';
import {LoadingOutlined, ReloadOutlined} from '@ant-design/icons';
import moment from 'moment';
const valueEnum = {
0: 'close',
1: 'running',
2: 'online',
3: 'error',
};
const tableListDataSource = [];
for (let i = 0; i < 2; i += 1) {
tableListDataSource.push({
key: i,
name: `TradeCode ${i}`,
status: valueEnum[Math.floor(Math.random() * 10) % 4],
updatedAt: Date.now() - Math.floor(Math.random() * 1000),
createdAt: Date.now() - Math.floor(Math.random() * 2000),
money: Math.floor(Math.random() * 2000) * i,
progress: Math.ceil(Math.random() * 100) + 1,
});
}
const timeAwait = (waitTime) => new Promise((res) => window.setTimeout(() => {
res();
}, waitTime));
const columns = [
{
title: '序号',
dataIndex: 'index',
valueType: 'index',
width: 80,
},
{
title: '状态',
dataIndex: 'status',
initialValue: 'all',
filters: true,
onFilter: true,
valueEnum: {
all: {text: '全部', status: 'Default'},
close: {text: '关闭', status: 'Default'},
running: {text: '运行中', status: 'Processing'},
online: {text: '已上线', status: 'Success'},
error: {text: '异常', status: 'Error'},
},
},
{
title: '进度',
key: 'progress',
dataIndex: 'progress',
valueType: (item) => ({
type: 'progress',
status: item.status !== 'error' ? 'active' : 'exception',
}),
},
{
title: '更新时间',
key: 'since2',
dataIndex: 'createdAt',
valueType: 'date',
},
{
title: '创建时间',
key: 'since3',
dataIndex: 'createdAt',
valueType: 'dateMonth',
},
];
export default () => {
const [time, setTime] = useState(() => Date.now());
const [polling, setPolling] = useState(2000);
return (<ProTable search={false} pagination={false} columns={columns} rowKey="key" pagination={{
showSizeChanger: true,
}} polling={polling || undefined} request={async () => {
await timeAwait(1000);
setTime(Date.now());
return {
data: tableListDataSource,
success: true,
total: tableListDataSource.length,
};
}} dateFormatter="string" headerTitle={`上次更新时间：${moment(time).format('HH:mm:ss')}`}
toolBarRender={() => [
<Button key="3" type="primary" onClick={() => {
if (polling) {
setPolling(undefined);
return;
}
setPolling(2000);
}}>
{polling ? <LoadingOutlined/> : <ReloadOutlined/>}
{polling ? '停止轮询' : '开始轮询'}
</Button>,
]}/>);
};
升级到最新版，这个分页功能还是禁用不掉
在右下角还是带有分页效果