| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper title="Tree函数操作示例"> |
| V | 3 | <div class="flex"> |
| 72b42d | 4 | <CollapseContainer title="右侧操作按钮/自定义图标" class="mr-4" :style="{ width: '33%' }"> |
| V | 5 | <BasicTree :treeData="treeData" :actionList="actionList" :renderIcon="createIcon" /> |
| 31ff05 | 6 | </CollapseContainer> |
| 2f6253 | 7 | |
| 31ff05 | 8 | <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }"> |
| V | 9 | <BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" /> |
| 10 | </CollapseContainer> | |
| 11 | </div> | |
| 12 | </PageWrapper> | |
| 2f6253 | 13 | </template> |
| 陈 | 14 | <script lang="ts"> |
| 15 | import { defineComponent, h } from 'vue'; | |
| 16 | import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index'; | |
| 17 | import { treeData } from './data'; | |
| 18 | import { CollapseContainer } from '/@/components/Container/index'; | |
| 19 | import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'; | |
| 31ff05 | 20 | import { PageWrapper } from '/@/components/Page'; |
| V | 21 | |
| 2f6253 | 22 | export default defineComponent({ |
| 31ff05 | 23 | components: { BasicTree, CollapseContainer, PageWrapper }, |
| 2f6253 | 24 | setup() { |
| 陈 | 25 | function handlePlus(node: any) { |
| 26 | console.log(node); | |
| 27 | } | |
| 28 | ||
| 29 | function getRightMenuList(node: any): ContextMenuItem[] { | |
| 30 | return [ | |
| 31 | { | |
| 32 | label: '新增', | |
| 33 | handler: () => { | |
| 34 | console.log('点击了新增', node); | |
| 35 | }, | |
| 5dc822 | 36 | icon: 'bi:plus', |
| 2f6253 | 37 | }, |
| 陈 | 38 | { |
| 39 | label: '删除', | |
| 40 | handler: () => { | |
| 41 | console.log('点击了删除', node); | |
| 42 | }, | |
| 5dc822 | 43 | icon: 'bx:bxs-folder-open', |
| 2f6253 | 44 | }, |
| 陈 | 45 | ]; |
| 46 | } | |
| 47 | const actionList: ActionItem[] = [ | |
| 48 | { | |
| 49 | render: (node) => { | |
| 50 | return h(PlusOutlined, { | |
| 51 | class: 'ml-2', | |
| 52 | onClick: () => { | |
| 53 | handlePlus(node); | |
| 54 | }, | |
| 55 | }); | |
| 56 | }, | |
| 57 | }, | |
| 58 | { | |
| 59 | render: () => { | |
| 60 | return h(DeleteOutlined); | |
| 61 | }, | |
| 62 | }, | |
| 63 | ]; | |
| 72b42d | 64 | |
| V | 65 | function createIcon({ level }) { |
| 66 | if (level === 1) { | |
| 67 | return 'ion:git-compare-outline'; | |
| 68 | } | |
| 69 | if (level === 2) { | |
| 70 | return 'ion:home'; | |
| 71 | } | |
| 72 | if (level === 3) { | |
| 73 | return 'ion:airplane'; | |
| 74 | } | |
| 75 | } | |
| 76 | return { treeData, actionList, getRightMenuList, createIcon }; | |
| 2f6253 | 77 | }, |
| 陈 | 78 | }); |
| 79 | </script> | |
