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
| <script lang="ts" setup>
| import { ApiComponent } from '@vben/common-ui';
|
| import { Cascader } from 'ant-design-vue';
|
| const treeData: Record<string, any> = [
| {
| label: '浙江',
| value: 'zhejiang',
| children: [
| {
| value: 'hangzhou',
| label: '杭州',
| children: [
| {
| value: 'xihu',
| label: '西湖',
| },
| {
| value: 'sudi',
| label: '苏堤',
| },
| ],
| },
| {
| value: 'jiaxing',
| label: '嘉兴',
| children: [
| {
| value: 'wuzhen',
| label: '乌镇',
| },
| {
| value: 'meihuazhou',
| label: '梅花洲',
| },
| ],
| },
| {
| value: 'zhoushan',
| label: '舟山',
| children: [
| {
| value: 'putuoshan',
| label: '普陀山',
| },
| {
| value: 'taohuadao',
| label: '桃花岛',
| },
| ],
| },
| ],
| },
| {
| label: '江苏',
| value: 'jiangsu',
| children: [
| {
| value: 'nanjing',
| label: '南京',
| children: [
| {
| value: 'zhonghuamen',
| label: '中华门',
| },
| {
| value: 'zijinshan',
| label: '紫金山',
| },
| {
| value: 'yuhuatai',
| label: '雨花台',
| },
| ],
| },
| ],
| },
| ];
| /**
| * 模拟请求接口
| */
| function fetchApi(): Promise<Record<string, any>> {
| return new Promise((resolve) => {
| setTimeout(() => {
| resolve(treeData);
| }, 1000);
| });
| }
| </script>
| <template>
| <ApiComponent
| :api="fetchApi"
| :component="Cascader"
| :immediate="false"
| children-field="children"
| loading-slot="suffixIcon"
| visible-event="onDropdownVisibleChange"
| />
| </template>
|
|
