1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
| import { EllipsisOutlined, SearchOutlined } from '@ant-design/icons';
| import { ProTable, TableDropdown } from '@ant-design/pro-components';
| import { Button, Dropdown, Input } from 'antd';
|
| const valueEnum = {
| 0: 'close',
| 1: 'running',
| 2: 'online',
| 3: 'error',
| };
|
| const tableListDataSource = [];
|
| const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];
|
| for (let i = 0; i < 5; i += 1) {
| tableListDataSource.push({
| key: i,
| name: 'AppName',
| containers: Math.floor(Math.random() * 20),
| creator: creators[Math.floor(Math.random() * creators.length)],
| status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '')],
| createdAt: Date.now() - Math.floor(Math.random() * 2000),
| money: Math.floor(Math.random() * 2000) * i,
| progress: Math.ceil(Math.random() * 100) + 1,
| memo:
| i % 2 === 1
| ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
| : '简短备注文案',
| });
| }
|
| const columns = [
| {
| title: '排序',
| dataIndex: 'index',
| valueType: 'indexBorder',
| width: 48,
| },
| {
| title: '应用名称',
| dataIndex: 'name',
| render: (_) => <a>{_}</a>,
| // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
| filterDropdown: () => (
| <div style={{ padding: 8 }}>
| <Input style={{ width: 188, marginBlockEnd: 8, display: 'block' }} />
| </div>
| ),
| filterIcon: (filtered) => (
| <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
| ),
| },
| {
| title: '创建者',
| dataIndex: 'creator',
| valueEnum: {
| all: { text: '全部' },
| 付小小: { text: '付小小' },
| 曲丽丽: { text: '曲丽丽' },
| 林东东: { text: '林东东' },
| 陈帅帅: { text: '陈帅帅' },
| 兼某某: { text: '兼某某' },
| },
| },
| {
| 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: '备注',
| dataIndex: 'memo',
| ellipsis: true,
| copyable: true,
| },
| {
| title: '操作',
| width: 180,
| key: 'option',
| valueType: 'option',
| render: () => [
| <a key="link">链路</a>,
| <a key="link2">报警</a>,
| <a key="link3">监控</a>,
| <TableDropdown
| key="actionGroup"
| menus={[
| { key: 'copy', name: '复制' },
| { key: 'delete', name: '删除' },
| ]}
| />,
| ],
| },
| ];
|
| export default () => {
| return (
| <ProTable
| columns={columns}
| request={(params, sorter, filter) => {
| // 表单搜索项会从 params 传入，传递给后端接口。
| console.log(params, sorter, filter);
| return Promise.resolve({
| data: tableListDataSource,
| success: true,
| });
| }}
| rowKey="key"
| pagination={{
| showQuickJumper: true,
| }}
| search={{
| layout: 'vertical',
| defaultCollapsed: false,
| }}
| dateFormatter="string"
| toolbar={{
| title: '高级表格',
| tooltip: '这是一个标题提示',
| }}
| toolBarRender={() => [
| <Button key="danger" danger>
| 危险按钮
| </Button>,
| <Button key="show">查看日志</Button>,
| <Button type="primary" key="primary">
| 创建应用
| </Button>,
|
| <Dropdown
| key="menu"
| menu={{
| items: [
| {
| label: '1st item',
| key: '1',
| },
| {
| label: '2nd item',
| key: '2',
| },
| {
| label: '3rd item',
| key: '3',
| },
| ],
| }}
| >
| <Button>
| <EllipsisOutlined />
| </Button>
| </Dropdown>,
| ]}
| />
| );
| };
|
|
