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
| <template>
| <PageWrapper title="Tree函数操作示例">
| <div class="flex">
| <BasicTree
| class="w-1/3"
| title="右侧操作按钮/自定义图标"
| helpMessage="帮助信息"
| :treeData="treeData"
| :actionList="actionList"
| :renderIcon="createIcon"
| />
| <BasicTree class="w-1/3 mx-4" title="右键菜单" :treeData="treeData" :beforeRightClick="getRightMenuList" />
| <BasicTree class="w-1/3" title="工具栏使用" toolbar checkable search :treeData="treeData" :beforeRightClick="getRightMenuList" />
| </div>
| </PageWrapper>
| </template>
| <script lang="ts">
| import { defineComponent, h } from 'vue';
| import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index';
| import { treeData } from './data';
| import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
| import { PageWrapper } from '/@/components/Page';
|
| export default defineComponent({
| components: { BasicTree, PageWrapper },
| setup() {
| function handlePlus(node: any) {
| console.log(node);
| }
|
| function getRightMenuList(node: any): ContextMenuItem[] {
| return [
| {
| label: '新增',
| handler: () => {
| console.log('点击了新增', node);
| },
| icon: 'bi:plus',
| },
| {
| label: '删除',
| handler: () => {
| console.log('点击了删除', node);
| },
| icon: 'bx:bxs-folder-open',
| },
| ];
| }
| const actionList: ActionItem[] = [
| {
| // show:()=>boolean;
| render: (node) => {
| return h(PlusOutlined, {
| class: 'ml-2',
| onClick: () => {
| handlePlus(node);
| },
| });
| },
| },
| {
| render: () => {
| return h(DeleteOutlined);
| },
| },
| ];
|
| function createIcon({ level }) {
| if (level === 1) {
| return 'ion:git-compare-outline';
| }
| if (level === 2) {
| return 'ion:home';
| }
| if (level === 3) {
| return 'ion:airplane';
| }
| return '';
| }
| return { treeData, actionList, getRightMenuList, createIcon };
| },
| });
| </script>
|
|
