index.vue
3.98 KB
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
<template>
<PageWrapper title="Tree基础示例">
<Row :gutter="[16, 16]">
<Col :span="8">
<BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1">
<template #title> 123123 </template>
</BasicTree>
</Col>
<Col :span="8">
<BasicTree
title="可勾选，默认全部展开"
:treeData="treeData"
:checkable="true"
defaultExpandAll
@check="handleCheck"
/>
</Col>
<Col :span="8">
<BasicTree
title="指定默认展开/勾选示例"
:treeData="treeData"
:checkable="true"
:expandedKeys="['0-0']"
:checkedKeys="['0-0']"
/>
</Col>
<Col :span="8">
<BasicTree
title="懒加载异步树"
ref="asyncTreeRef"
:treeData="tree"
:load-data="onLoadData"
/>
</Col>
<Col :span="8">
<Card title="异步数据，默认展开">
<template #extra>
<a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
</template>
<Spin :spinning="treeLoading">
<BasicTree ref="asyncExpandTreeRef" :treeData="tree2" />
</Spin>
</Card>
</Col>
<Col :span="8">
<Card title="BasicTree内置加载">
<template #extra>
<a-button @click="loadTreeData2" :loading="treeLoading">请求数据</a-button>
</template>
<BasicTree ref="loadTreeRef" :treeData="tree2" :loading="treeLoading" />
</Card>
</Col>
</Row>
</PageWrapper>
</template>
<script lang="ts" setup>
import { nextTick, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
import { treeData } from './data';
import { PageWrapper } from '/@/components/Page';
import { Card, Row, Col, Spin } from 'ant-design-vue';
import { cloneDeep, uniq } from 'lodash-es';
import { isArray } from '/@/utils/is';
import { type Nullable } from '@vben/types';
const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
const loadTreeRef = ref<Nullable<TreeActionType>>(null);
const tree2 = ref<TreeItem[]>([]);
const treeLoading = ref(false);
function handleCheck(checkedKeys, e) {
console.log('onChecked', checkedKeys, e);
}
function loadTreeData() {
treeLoading.value = true;
// 以下是模拟异步获取数据
setTimeout(() => {
// 设置数据源
tree2.value = cloneDeep(treeData);
treeLoading.value = false;
// 展开全部
nextTick(() => {
console.log(unref(asyncExpandTreeRef));
unref(asyncExpandTreeRef)?.expandAll(true);
});
}, 2000);
}
function loadTreeData2() {
treeLoading.value = true;
// 以下是模拟异步获取数据
setTimeout(() => {
// 设置数据源
tree2.value = cloneDeep(treeData);
treeLoading.value = false;
}, 2000);
}
const tree = ref([
{
title: 'parent ',
key: '0-0',
},
]);
function onLoadData(treeNode) {
return new Promise((resolve: (value?: unknown) => void) => {
if (isArray(treeNode.children) && treeNode.children.length > 0) {
resolve();
return;
}
setTimeout(() => {
const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
if (asyncTreeAction) {
const nodeChildren = [
{ title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
{ title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
];
asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
asyncTreeAction.setExpandedKeys(
uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
);
}
resolve();
return;
}, 300);
});
}
</script>