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 1 <template>
2 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 51 </PageWrapper>
29 52 </template>
30 53 <script lang="ts">
31 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 58 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
35 59 import { PageWrapper } from '/@/components/Page';
36 60  
37 61 export default defineComponent({
38   - components: { BasicTree, PageWrapper },
  62 + components: { BasicTree, PageWrapper, Row, Col },
39 63 setup() {
40 64 function handlePlus(node: any) {
41 65 console.log(node);
... ... @@ -59,7 +83,7 @@
59 83 },
60 84 ];
61 85 }
62   - const actionList: ActionItem[] = [
  86 + const actionList: TreeActionItem[] = [
63 87 {
64 88 // show:()=>boolean;
65 89 render: (node) => {
... ... @@ -90,7 +114,7 @@
90 114 }
91 115 return '';
92 116 }
93   - return { treeData, actionList, getRightMenuList, createIcon };
  117 + return { treeData, treeData2, treeData3, actionList, getRightMenuList, createIcon };
94 118 },
95 119 });
96 120 </script>
... ...
src/views/demo/tree/data.ts
  View file @13d660b
... ... @@ -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 +];
... ...