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
| <template>
| <a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
| <template #operation>
| <a>Publish</a>
| </template>
| <template #expandedRowRender>
| <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
| <template #status>
| <span>
| <a-badge status="success" />
| Finished
| </span>
| </template>
| <template #operation>
| <span class="table-operation">
| <a>Pause</a>
| <a>Stop</a>
| <a-dropdown>
| <template #overlay>
| <a-menu>
| <a-menu-item>Action 1</a-menu-item>
| <a-menu-item>Action 2</a-menu-item>
| </a-menu>
| </template>
| <a> More </a>
| </a-dropdown>
| </span>
| </template>
| </a-table>
| </template>
| </a-table>
| </template>
| <script lang="ts">
| import { defineComponent } from 'vue';
|
| const columns = [
| { title: 'Name', dataIndex: 'name', key: 'name' },
| { title: 'Platform', dataIndex: 'platform', key: 'platform' },
| { title: 'Version', dataIndex: 'version', key: 'version' },
| { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
| { title: 'Creator', dataIndex: 'creator', key: 'creator' },
| { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
| { title: 'Action', key: 'operation', slots: { customRender: 'operation' } },
| ];
|
| interface DataItem {
| key: number;
| name: string;
| platform: string;
| version: string;
| upgradeNum: number;
| creator: string;
| createdAt: string;
| }
|
| const data: DataItem[] = [];
| for (let i = 0; i < 3; ++i) {
| data.push({
| key: i,
| name: 'Screem',
| platform: 'iOS',
| version: '10.3.4.5654',
| upgradeNum: 500,
| creator: 'Jack',
| createdAt: '2014-12-24 23:12:00',
| });
| }
|
| const innerColumns = [
| { title: 'Date', dataIndex: 'date', key: 'date' },
| { title: 'Name', dataIndex: 'name', key: 'name' },
| { title: 'Status', key: 'state', slots: { customRender: 'status' } },
| { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
| {
| title: 'Action',
| dataIndex: 'operation',
| key: 'operation',
| slots: { customRender: 'operation' },
| },
| ];
|
| interface innerDataItem {
| key: number;
| date: string;
| name: string;
| upgradeNum: string;
| }
|
| const innerData: innerDataItem[] = [];
| for (let i = 0; i < 3; ++i) {
| innerData.push({
| key: i,
| date: '2014-12-24 23:12:00',
| name: 'This is production name',
| upgradeNum: 'Upgraded: 56',
| });
| }
|
| export default defineComponent({
| components: {},
| setup() {
| return {
| data,
| columns,
| innerColumns,
| innerData,
| };
| },
| });
| </script>
|
|
