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
| <script lang="ts" setup>
| import type { VxeGridProps } from '#/adapter/vxe-table';
|
| import { Button } from 'ant-design-vue';
|
| import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
| import { MOCK_TREE_TABLE_DATA } from '../table-data';
|
| interface RowType {
| date: string;
| id: number;
| name: string;
| parentId: null | number;
| size: number;
| type: string;
| }
|
| // 数据实例
| // const MOCK_TREE_TABLE_DATA = [
| // {
| // date: '2020-08-01',
| // id: 10_000,
| // name: 'Test1',
| // parentId: null,
| // size: 1024,
| // type: 'mp3',
| // },
| // {
| // date: '2021-04-01',
| // id: 10_050,
| // name: 'Test2',
| // parentId: 10_000,
| // size: 0,
| // type: 'mp4',
| // },
| // ];
|
| const gridOptions: VxeGridProps<RowType> = {
| columns: [
| { type: 'seq', width: 70 },
| { field: 'name', minWidth: 300, title: 'Name', treeNode: true },
| { field: 'size', title: 'Size' },
| { field: 'type', title: 'Type' },
| { field: 'date', title: 'Date' },
| ],
| data: MOCK_TREE_TABLE_DATA,
| pagerConfig: {
| enabled: false,
| },
| treeConfig: {
| parentField: 'parentId',
| rowField: 'id',
| transform: true,
| },
| };
|
| const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
|
| const expandAll = () => {
| gridApi.grid?.setAllTreeExpand(true);
| };
|
| const collapseAll = () => {
| gridApi.grid?.setAllTreeExpand(false);
| };
| </script>
|
| <template>
| <div class="vp-raw h-[300px] w-full">
| <Grid>
| <template #toolbar-tools>
| <Button class="mr-2" type="primary" @click="expandAll">
| 展开全部
| </Button>
| <Button type="primary" @click="collapseAll"> 折叠全部 </Button>
| </template>
| </Grid>
| </div>
| </template>
|
|
