From 542121129eb5bf65f61e7b484835591756c80f04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Tue, 6 Jul 2021 17:10:19 +0800
Subject: [PATCH] feat(demo): add basicTree with async data expand all
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

演示basicTree使用异步数据并自动展开
---
 src/views/demo/tree/index.vue | 116 ++++++++++++++++++++++------------
 1 file changed, 77 insertions(+), 39 deletions(-)

diff --git a/src/views/demo/tree/index.vue b/src/views/demo/tree/index.vue
index 01f579400..1e2b80146 100644
--- a/src/views/demo/tree/index.vue
+++ b/src/views/demo/tree/index.vue
@@ -1,55 +1,83 @@
 <template>
   <PageWrapper title="Tree基础示例">
-    <div class="flex">
-      <BasicTree
-        :treeData="treeData"
-        title="基础示例，默认展开第一层"
-        defaultExpandLevel="1"
-        class="w-1/3"
-      />
-
-      <BasicTree
-        :treeData="treeData"
-        title="可勾选，默认全部展开"
-        :checkable="true"
-        class="w-1/3 mx-4"
-        defaultExpandAll
-        @check="handleCheck"
-      />
-
-      <BasicTree
-        title="指定默认展开/勾选示例"
-        :treeData="treeData"
-        :checkable="true"
-        :expandedKeys="['0-0']"
-        :checkedKeys="['0-0']"
-        class="w-1/3"
-      />
-    </div>
-    <div class="flex">
-      <BasicTree
-        title="异步树"
-        ref="asyncTreeRef"
-        :treeData="tree"
-        class="w-1/3"
-        :load-data="onLoadData"
-      />
-    </div>
+    <Row :gutter="[16, 16]">
+      <Col :span="8">
+        <BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1" />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="可勾选，默认全部展开"
+          :treeData="treeData"
+          :checkable="true"
+          defaultExpandAll
+          @check="handleCheck"
+        />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="指定默认展开/勾选示例"
+          :treeData="treeData"
+          :checkable="true"
+          :expandedKeys="['0-0']"
+          :checkedKeys="['0-0']"
+        />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="懒加载异步树"
+          ref="asyncTreeRef"
+          :treeData="tree"
+          :load-data="onLoadData"
+        />
+      </Col>
+      <Col :span="16">
+        <Card title="异步数据，默认展开">
+          <template #extra>
+            <a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
+          </template>
+          <Spin :spinning="treeLoading">
+            <BasicTree ref="asyncExpandTreeRef" :treeData="tree2" />
+          </Spin>
+        </Card>
+      </Col>
+    </Row>
   </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { BasicTree, TreeActionType } from '/@/components/Tree/index';
+  import { defineComponent, nextTick, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
   import { treeData } from './data';
   import { PageWrapper } from '/@/components/Page';
+  import { Card, Row, Col, Spin } from 'ant-design-vue';
+  import { cloneDeep } from 'lodash-es';
 
   export default defineComponent({
-    components: { BasicTree, PageWrapper },
+    components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
     setup() {
       const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
+      const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
+      const tree2 = ref<TreeItem[]>([]);
+      const treeLoading = ref(false);
+
       function handleCheck(checkedKeys, e) {
         console.log('onChecked', checkedKeys, e);
       }
+
+      function loadTreeData() {
+        treeLoading.value = true;
+        // 以下是模拟异步获取数据
+        setTimeout(() => {
+          // 设置数据源
+          tree2.value = cloneDeep(treeData);
+          treeLoading.value = false;
+          // 展开全部
+          nextTick(() => {
+            console.log(unref(asyncExpandTreeRef));
+            unref(asyncExpandTreeRef)?.expandAll(true);
+          });
+        }, 2000);
+      }
+
       const tree = ref([
         {
           title: 'parent ',
@@ -82,7 +110,17 @@
           }, 1000);
         });
       }
-      return { treeData, handleCheck, tree, onLoadData, asyncTreeRef };
+      return {
+        treeData,
+        handleCheck,
+        tree,
+        onLoadData,
+        asyncTreeRef,
+        asyncExpandTreeRef,
+        tree2,
+        loadTreeData,
+        treeLoading,
+      };
     },
   });
 </script>