feat(demo): add basicTree with async data expand all

演示basicTree使用异步数据并自动展开

src/views/demo/tree/index.vue

@@ -1,55 +1,83 @@
 <template>
   <PageWrapper title="Tree基础示例">
-    <div class="flex">
+    <Row :gutter="[16, 16]">
+      <Col :span="8">
+        <BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1" />
+      </Col>
+      <Col :span="8">
         <BasicTree
-        :treeData="treeData"
-        title="基础示例，默认展开第一层"
-        defaultExpandLevel="1"
-        class="w-1/3"
-      />
-
-      <BasicTree
-        :treeData="treeData"
           title="可勾选，默认全部展开"
+          :treeData="treeData"
           :checkable="true"
-        class="w-1/3 mx-4"
           defaultExpandAll
           @check="handleCheck"
         />
-
+      </Col>
+      <Col :span="8">
         <BasicTree
           title="指定默认展开/勾选示例"
           :treeData="treeData"
           :checkable="true"
           :expandedKeys="['0-0']"
           :checkedKeys="['0-0']"
-        class="w-1/3"
         />
-    </div>
+      </Col>
-    <div class="flex">
+      <Col :span="8">
         <BasicTree
-        title="异步树"
+          title="懒加载异步树"
           ref="asyncTreeRef"
           :treeData="tree"
-        class="w-1/3"
           :load-data="onLoadData"
         />
-    </div>
+      </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 { defineComponent, nextTick, ref, unref } from 'vue';
-  import { BasicTree, TreeActionType } from '/@/components/Tree/index';
+  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>