| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 陈 | 2 | <div class="flex p-4"> |
| 03b602 | 3 | <CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }"> |
| 2f6253 | 4 | <BasicTree :treeData="treeData" :actionList="actionList" /> |
| 陈 | 5 | </CollapseContainer> |
| 6 | ||
| 03b602 | 7 | <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }"> |
| 2f6253 | 8 | <BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" /> |
| 陈 | 9 | </CollapseContainer> |
| 10 | </div> | |
| 11 | </template> | |
| 12 | <script lang="ts"> | |
| 13 | import { defineComponent, h } from 'vue'; | |
| 14 | import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index'; | |
| 15 | import { treeData } from './data'; | |
| 16 | import { CollapseContainer } from '/@/components/Container/index'; | |
| 17 | import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'; | |
| 18 | export default defineComponent({ | |
| 19 | components: { BasicTree, CollapseContainer }, | |
| 20 | setup() { | |
| 21 | function handlePlus(node: any) { | |
| 22 | console.log(node); | |
| 23 | } | |
| 24 | ||
| 25 | function getRightMenuList(node: any): ContextMenuItem[] { | |
| 26 | return [ | |
| 27 | { | |
| 28 | label: '新增', | |
| 29 | handler: () => { | |
| 30 | console.log('点击了新增', node); | |
| 31 | }, | |
| 32 | icon: 'ant-design:plus-outlined', | |
| 33 | }, | |
| 34 | { | |
| 35 | label: '删除', | |
| 36 | handler: () => { | |
| 37 | console.log('点击了删除', node); | |
| 38 | }, | |
| 39 | icon: 'ant-design:folder-open-filled', | |
| 40 | }, | |
| 41 | ]; | |
| 42 | } | |
| 43 | const actionList: ActionItem[] = [ | |
| 44 | { | |
| 45 | render: (node) => { | |
| 46 | return h(PlusOutlined, { | |
| 47 | class: 'ml-2', | |
| 48 | onClick: () => { | |
| 49 | handlePlus(node); | |
| 50 | }, | |
| 51 | }); | |
| 52 | }, | |
| 53 | }, | |
| 54 | { | |
| 55 | render: () => { | |
| 56 | return h(DeleteOutlined); | |
| 57 | }, | |
| 58 | }, | |
| 59 | ]; | |
| 60 | return { treeData, actionList, getRightMenuList }; | |
| 61 | }, | |
| 62 | }); | |
| 63 | </script> | |
