canrd-outside / order-erp-front · Commits

Commit 13d660bede83a991b8b613d3aeb0729cff2edfce

Authored by zuihou
1 parent 8523afd5

feat: 添加BasicTree使用 fieldNames 后，actionList 和 插槽 会失效的示例代码

Inline Side-by-side
Showing 2 changed files with 140 additions and 30 deletions
src/views/demo/tree/EditTree.vue
  View file @13d660b
1 <template> 1 <template>
2 <PageWrapper title="Tree函数操作示例"> 2 <PageWrapper title="Tree函数操作示例">
3 - <div class="flex">  
4 - <BasicTree  
5 - class="w-1/3"  
6 - title="右侧操作按钮/自定义图标"  
7 - helpMessage="帮助信息"  
8 - :treeData="treeData"  
9 - :actionList="actionList"  
10 - :renderIcon="createIcon"  
11 - />  
12 - <BasicTree  
13 - class="w-1/3 mx-4"  
14 - title="右键菜单"  
15 - :treeData="treeData"  
16 - :beforeRightClick="getRightMenuList"  
17 - />  
18 - <BasicTree  
19 - class="w-1/3"  
20 - title="工具栏使用"  
21 - toolbar  
22 - checkable  
23 - search  
24 - :treeData="treeData"  
25 - :beforeRightClick="getRightMenuList"  
26 - />  
27 - </div> 3 + <Row :gutter="[16, 16]">
  4 + <Col :span="8">
  5 + <BasicTree
  6 + title="右侧操作按钮/自定义图标"
  7 + helpMessage="帮助信息"
  8 + :treeData="treeData"
  9 + :actionList="actionList"
  10 + :renderIcon="createIcon"
  11 + />
  12 + </Col>
  13 + <Col :span="8">
  14 + <BasicTree title="右键菜单" :treeData="treeData" :beforeRightClick="getRightMenuList" />
  15 + </Col>
  16 + <Col :span="8">
  17 + <BasicTree
  18 + title="工具栏使用"
  19 + toolbar
  20 + checkable
  21 + search
  22 + :treeData="treeData"
  23 + :beforeRightClick="getRightMenuList"
  24 + />
  25 + </Col>
  26 + <Col :span="8">
  27 + <BasicTree title="没有fieldNames，插槽有效" helpMessage="正确的示例" :treeData="treeData3">
  28 + <template #title="item"> 插槽：{{ item.name }} </template>
  29 + </BasicTree>
  30 + </Col>
  31 + <Col :span="8">
  32 + <BasicTree
  33 + title="有fieldNames后，插槽失效"
  34 + helpMessage="错误的示例, 应该显示插槽的内容才对"
  35 + :fieldNames="{ key: 'id', title: 'name' }"
  36 + :treeData="treeData2"
  37 + >
  38 + <template #title="item"> 插槽：{{ item.title }} </template>
  39 + </BasicTree>
  40 + </Col>
  41 + <Col :span="8">
  42 + <BasicTree
  43 + title="有fieldNames后，actionList失效"
  44 + helpMessage="错误的示例，应该在鼠标移上去时，显示新增和删除按钮才对"
  45 + :treeData="treeData3"
  46 + :actionList="actionList"
  47 + :fieldNames="{ key: 'key', title: 'name' }"
  48 + />
  49 + </Col>
  50 + </Row>
28 </PageWrapper> 51 </PageWrapper>
29 </template> 52 </template>
30 <script lang="ts"> 53 <script lang="ts">
31 import { defineComponent, h } from 'vue'; 54 import { defineComponent, h } from 'vue';
32 - import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index';  
33 - import { treeData } from './data'; 55 + import { Row, Col } from 'ant-design-vue';
  56 + import { BasicTree, TreeActionItem, ContextMenuItem } from '/@/components/Tree/index';
  57 + import { treeData, treeData2, treeData3 } from './data';
34 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'; 58 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
35 import { PageWrapper } from '/@/components/Page'; 59 import { PageWrapper } from '/@/components/Page';
36 60
37 export default defineComponent({ 61 export default defineComponent({
38 - components: { BasicTree, PageWrapper }, 62 + components: { BasicTree, PageWrapper, Row, Col },
39 setup() { 63 setup() {
40 function handlePlus(node: any) { 64 function handlePlus(node: any) {
41 console.log(node); 65 console.log(node);
@@ -59,7 +83,7 @@ @@ -59,7 +83,7 @@
59 }, 83 },
60 ]; 84 ];
61 } 85 }
62 - const actionList: ActionItem[] = [ 86 + const actionList: TreeActionItem[] = [
63 { 87 {
64 // show:()=>boolean; 88 // show:()=>boolean;
65 render: (node) => { 89 render: (node) => {
@@ -90,7 +114,7 @@ @@ -90,7 +114,7 @@
90 } 114 }
91 return ''; 115 return '';
92 } 116 }
93 - return { treeData, actionList, getRightMenuList, createIcon }; 117 + return { treeData, treeData2, treeData3, actionList, getRightMenuList, createIcon };
94 }, 118 },
95 }); 119 });
96 </script> 120 </script>
src/views/demo/tree/data.ts
  View file @13d660b
@@ -33,3 +33,89 @@ export const treeData: TreeItem[] = [ @@ -33,3 +33,89 @@ export const treeData: TreeItem[] = [
33 ], 33 ],
34 }, 34 },
35 ]; 35 ];
  36 +
  37 +export const treeData2: any[] = [
  38 + {
  39 + name: 'parent ',
  40 + id: '0-0',
  41 + slots: { title: 'title' },
  42 + children: [
  43 + { name: 'leaf', id: '0-0-0', slots: { title: 'title' } },
  44 + {
  45 + name: 'leaf',
  46 + id: '0-0-1',
  47 + slots: { title: 'title' },
  48 + children: [
  49 + {
  50 + name: 'leaf',
  51 + slots: { title: 'title' },
  52 + id: '0-0-0-0',
  53 + children: [{ name: 'leaf', id: '0-0-0-0-1', slots: { title: 'title' } }],
  54 + },
  55 + { name: 'leaf', slots: { title: 'title' }, id: '0-0-0-1' },
  56 + ],
  57 + },
  58 + ],
  59 + },
  60 + {
  61 + name: 'parent 2',
  62 + id: '1-1',
  63 + slots: { title: 'title' },
  64 + children: [
  65 + { name: 'leaf', slots: { title: 'title' }, id: '1-1-0' },
  66 + { name: 'leaf', slots: { title: 'title' }, id: '1-1-1' },
  67 + ],
  68 + },
  69 + {
  70 + name: 'parent 3',
  71 + id: '2-2',
  72 + slots: { title: 'title' },
  73 + children: [
  74 + { name: 'leaf', slots: { title: 'title' }, id: '2-2-0' },
  75 + { name: 'leaf', slots: { title: 'title' }, id: '2-2-1' },
  76 + ],
  77 + },
  78 +];
  79 +
  80 +export const treeData3: any[] = [
  81 + {
  82 + name: 'parent ',
  83 + key: '0-0',
  84 + slots: { title: 'title' },
  85 + children: [
  86 + { name: 'leaf', key: '0-0-0', slots: { title: 'title' } },
  87 + {
  88 + name: 'leaf',
  89 + key: '0-0-1',
  90 + slots: { title: 'title' },
  91 + children: [
  92 + {
  93 + name: 'leaf',
  94 + slots: { title: 'title' },
  95 + key: '0-0-0-0',
  96 + children: [{ name: 'leaf', key: '0-0-0-0-1', slots: { title: 'title' } }],
  97 + },
  98 + { name: 'leaf', slots: { title: 'title' }, key: '0-0-0-1' },
  99 + ],
  100 + },
  101 + ],
  102 + },
  103 + {
  104 + name: 'parent 2',
  105 + key: '1-1',
  106 + slots: { title: 'title' },
  107 + children: [
  108 + { name: 'leaf', slots: { title: 'title' }, key: '1-1-0' },
  109 + { name: 'leaf', slots: { title: 'title' }, key: '1-1-1' },
  110 + ],
  111 + },
  112 + {
  113 + name: 'parent 3',
  114 + key: '2-2',
  115 + slots: { title: 'title' },
  116 + children: [
  117 + { name: 'leaf', slots: { title: 'title' }, key: '2-2-0' },
  118 + { name: 'leaf', slots: { title: 'title' }, key: '2-2-1' },
  119 + ],
  120 + },
  121 +];