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
| <template>
| <div class="flex p-4">
| <CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }">
| <BasicTree :treeData="treeData" :actionList="actionList" />
| </CollapseContainer>
|
| <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
| <BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" />
| </CollapseContainer>
| </div>
| </template>
| <script lang="ts">
| import { defineComponent, h } from 'vue';
| import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index';
| import { treeData } from './data';
| import { CollapseContainer } from '/@/components/Container/index';
| import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
| export default defineComponent({
| components: { BasicTree, CollapseContainer },
| setup() {
| function handlePlus(node: any) {
| console.log(node);
| }
|
| function getRightMenuList(node: any): ContextMenuItem[] {
| return [
| {
| label: '新增',
| handler: () => {
| console.log('点击了新增', node);
| },
| icon: 'ant-design:plus-outlined',
| },
| {
| label: '删除',
| handler: () => {
| console.log('点击了删除', node);
| },
| icon: 'ant-design:folder-open-filled',
| },
| ];
| }
| const actionList: ActionItem[] = [
| {
| render: (node) => {
| return h(PlusOutlined, {
| class: 'ml-2',
| onClick: () => {
| handlePlus(node);
| },
| });
| },
| },
| {
| render: () => {
| return h(DeleteOutlined);
| },
| },
| ];
| return { treeData, actionList, getRightMenuList };
| },
| });
| </script>
|
|
