From 13d660bede83a991b8b613d3aeb0729cff2edfce Mon Sep 17 00:00:00 2001
From: zuihou <244387066@qq.com>
Date: Fri, 10 Dec 2021 22:19:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0BasicTree=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20fieldNames=20=E5=90=8E=EF=BC=8CactionList=20?=
 =?UTF-8?q?=E5=92=8C=20=E6=8F=92=E6=A7=BD=20=E4=BC=9A=E5=A4=B1=E6=95=88?=
 =?UTF-8?q?=E7=9A=84=E7=A4=BA=E4=BE=8B=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/tree/EditTree.vue | 84 ++++++++++++++++++++-----------
 src/views/demo/tree/data.ts      | 86 ++++++++++++++++++++++++++++++++
 2 files changed, 140 insertions(+), 30 deletions(-)

diff --git a/src/views/demo/tree/EditTree.vue b/src/views/demo/tree/EditTree.vue
index 7c7fcfee..c2f2ad49 100644
--- a/src/views/demo/tree/EditTree.vue
+++ b/src/views/demo/tree/EditTree.vue
@@ -1,41 +1,65 @@
 <template>
   <PageWrapper title="Tree函数操作示例">
-    <div class="flex">
-      <BasicTree
-        class="w-1/3"
-        title="右侧操作按钮/自定义图标"
-        helpMessage="帮助信息"
-        :treeData="treeData"
-        :actionList="actionList"
-        :renderIcon="createIcon"
-      />
-      <BasicTree
-        class="w-1/3 mx-4"
-        title="右键菜单"
-        :treeData="treeData"
-        :beforeRightClick="getRightMenuList"
-      />
-      <BasicTree
-        class="w-1/3"
-        title="工具栏使用"
-        toolbar
-        checkable
-        search
-        :treeData="treeData"
-        :beforeRightClick="getRightMenuList"
-      />
-    </div>
+    <Row :gutter="[16, 16]">
+      <Col :span="8">
+        <BasicTree
+          title="右侧操作按钮/自定义图标"
+          helpMessage="帮助信息"
+          :treeData="treeData"
+          :actionList="actionList"
+          :renderIcon="createIcon"
+        />
+      </Col>
+      <Col :span="8">
+        <BasicTree title="右键菜单" :treeData="treeData" :beforeRightClick="getRightMenuList" />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="工具栏使用"
+          toolbar
+          checkable
+          search
+          :treeData="treeData"
+          :beforeRightClick="getRightMenuList"
+        />
+      </Col>
+      <Col :span="8">
+        <BasicTree title="没有fieldNames，插槽有效" helpMessage="正确的示例" :treeData="treeData3">
+          <template #title="item"> 插槽：{{ item.name }} </template>
+        </BasicTree>
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="有fieldNames后，插槽失效"
+          helpMessage="错误的示例, 应该显示插槽的内容才对"
+          :fieldNames="{ key: 'id', title: 'name' }"
+          :treeData="treeData2"
+        >
+          <template #title="item"> 插槽：{{ item.title }} </template>
+        </BasicTree>
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="有fieldNames后，actionList失效"
+          helpMessage="错误的示例，应该在鼠标移上去时，显示新增和删除按钮才对"
+          :treeData="treeData3"
+          :actionList="actionList"
+          :fieldNames="{ key: 'key', title: 'name' }"
+        />
+      </Col>
+    </Row>
   </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent, h } from 'vue';
-  import { BasicTree, ActionItem, ContextMenuItem } from '/@/components/Tree/index';
-  import { treeData } from './data';
+  import { Row, Col } from 'ant-design-vue';
+  import { BasicTree, TreeActionItem, ContextMenuItem } from '/@/components/Tree/index';
+  import { treeData, treeData2, treeData3 } from './data';
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { PageWrapper } from '/@/components/Page';
 
   export default defineComponent({
-    components: { BasicTree, PageWrapper },
+    components: { BasicTree, PageWrapper, Row, Col },
     setup() {
       function handlePlus(node: any) {
         console.log(node);
@@ -59,7 +83,7 @@
           },
         ];
       }
-      const actionList: ActionItem[] = [
+      const actionList: TreeActionItem[] = [
         {
           // show:()=>boolean;
           render: (node) => {
@@ -90,7 +114,7 @@
         }
         return '';
       }
-      return { treeData, actionList, getRightMenuList, createIcon };
+      return { treeData, treeData2, treeData3, actionList, getRightMenuList, createIcon };
     },
   });
 </script>
diff --git a/src/views/demo/tree/data.ts b/src/views/demo/tree/data.ts
index 8fb40bf8..cbbf3969 100644
--- a/src/views/demo/tree/data.ts
+++ b/src/views/demo/tree/data.ts
@@ -33,3 +33,89 @@ export const treeData: TreeItem[] = [
     ],
   },
 ];
+
+export const treeData2: any[] = [
+  {
+    name: 'parent ',
+    id: '0-0',
+    slots: { title: 'title' },
+    children: [
+      { name: 'leaf', id: '0-0-0', slots: { title: 'title' } },
+      {
+        name: 'leaf',
+        id: '0-0-1',
+        slots: { title: 'title' },
+        children: [
+          {
+            name: 'leaf',
+            slots: { title: 'title' },
+            id: '0-0-0-0',
+            children: [{ name: 'leaf', id: '0-0-0-0-1', slots: { title: 'title' } }],
+          },
+          { name: 'leaf', slots: { title: 'title' }, id: '0-0-0-1' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'parent 2',
+    id: '1-1',
+    slots: { title: 'title' },
+    children: [
+      { name: 'leaf', slots: { title: 'title' }, id: '1-1-0' },
+      { name: 'leaf', slots: { title: 'title' }, id: '1-1-1' },
+    ],
+  },
+  {
+    name: 'parent 3',
+    id: '2-2',
+    slots: { title: 'title' },
+    children: [
+      { name: 'leaf', slots: { title: 'title' }, id: '2-2-0' },
+      { name: 'leaf', slots: { title: 'title' }, id: '2-2-1' },
+    ],
+  },
+];
+
+export const treeData3: any[] = [
+  {
+    name: 'parent ',
+    key: '0-0',
+    slots: { title: 'title' },
+    children: [
+      { name: 'leaf', key: '0-0-0', slots: { title: 'title' } },
+      {
+        name: 'leaf',
+        key: '0-0-1',
+        slots: { title: 'title' },
+        children: [
+          {
+            name: 'leaf',
+            slots: { title: 'title' },
+            key: '0-0-0-0',
+            children: [{ name: 'leaf', key: '0-0-0-0-1', slots: { title: 'title' } }],
+          },
+          { name: 'leaf', slots: { title: 'title' }, key: '0-0-0-1' },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'parent 2',
+    key: '1-1',
+    slots: { title: 'title' },
+    children: [
+      { name: 'leaf', slots: { title: 'title' }, key: '1-1-0' },
+      { name: 'leaf', slots: { title: 'title' }, key: '1-1-1' },
+    ],
+  },
+  {
+    name: 'parent 3',
+    key: '2-2',
+    slots: { title: 'title' },
+    children: [
+      { name: 'leaf', slots: { title: 'title' }, key: '2-2-0' },
+      { name: 'leaf', slots: { title: 'title' }, key: '2-2-1' },
+    ],
+  },
+];