canrd-outside / order-erp-front · Commits

Commit 542121129eb5bf65f61e7b484835591756c80f04

Authored by 无木
1 parent cf840e3e

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

演示basicTree使用异步数据并自动展开
Inline Side-by-side
Showing 1 changed file with 77 additions and 39 deletions
src/views/demo/tree/index.vue
  View file @5421211
1 <template> 1 <template>
2 <PageWrapper title="Tree基础示例"> 2 <PageWrapper title="Tree基础示例">
3 - <div class="flex">  
4 - <BasicTree  
5 - :treeData="treeData"  
6 - title="基础示例，默认展开第一层"  
7 - defaultExpandLevel="1"  
8 - class="w-1/3"  
9 - />  
10 -  
11 - <BasicTree  
12 - :treeData="treeData"  
13 - title="可勾选，默认全部展开"  
14 - :checkable="true"  
15 - class="w-1/3 mx-4"  
16 - defaultExpandAll  
17 - @check="handleCheck"  
18 - />  
19 -  
20 - <BasicTree  
21 - title="指定默认展开/勾选示例"  
22 - :treeData="treeData"  
23 - :checkable="true"  
24 - :expandedKeys="['0-0']"  
25 - :checkedKeys="['0-0']"  
26 - class="w-1/3"  
27 - />  
28 - </div>  
29 - <div class="flex">  
30 - <BasicTree  
31 - title="异步树"  
32 - ref="asyncTreeRef"  
33 - :treeData="tree"  
34 - class="w-1/3"  
35 - :load-data="onLoadData"  
36 - />  
37 - </div> 3 + <Row :gutter="[16, 16]">
  4 + <Col :span="8">
  5 + <BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1" />
  6 + </Col>
  7 + <Col :span="8">
  8 + <BasicTree
  9 + title="可勾选，默认全部展开"
  10 + :treeData="treeData"
  11 + :checkable="true"
  12 + defaultExpandAll
  13 + @check="handleCheck"
  14 + />
  15 + </Col>
  16 + <Col :span="8">
  17 + <BasicTree
  18 + title="指定默认展开/勾选示例"
  19 + :treeData="treeData"
  20 + :checkable="true"
  21 + :expandedKeys="['0-0']"
  22 + :checkedKeys="['0-0']"
  23 + />
  24 + </Col>
  25 + <Col :span="8">
  26 + <BasicTree
  27 + title="懒加载异步树"
  28 + ref="asyncTreeRef"
  29 + :treeData="tree"
  30 + :load-data="onLoadData"
  31 + />
  32 + </Col>
  33 + <Col :span="16">
  34 + <Card title="异步数据，默认展开">
  35 + <template #extra>
  36 + <a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
  37 + </template>
  38 + <Spin :spinning="treeLoading">
  39 + <BasicTree ref="asyncExpandTreeRef" :treeData="tree2" />
  40 + </Spin>
  41 + </Card>
  42 + </Col>
  43 + </Row>
38 </PageWrapper> 44 </PageWrapper>
39 </template> 45 </template>
40 <script lang="ts"> 46 <script lang="ts">
41 - import { defineComponent, ref, unref } from 'vue';  
42 - import { BasicTree, TreeActionType } from '/@/components/Tree/index'; 47 + import { defineComponent, nextTick, ref, unref } from 'vue';
  48 + import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
43 import { treeData } from './data'; 49 import { treeData } from './data';
44 import { PageWrapper } from '/@/components/Page'; 50 import { PageWrapper } from '/@/components/Page';
  51 + import { Card, Row, Col, Spin } from 'ant-design-vue';
  52 + import { cloneDeep } from 'lodash-es';
45 53
46 export default defineComponent({ 54 export default defineComponent({
47 - components: { BasicTree, PageWrapper }, 55 + components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
48 setup() { 56 setup() {
49 const asyncTreeRef = ref<Nullable<TreeActionType>>(null); 57 const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
  58 + const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
  59 + const tree2 = ref<TreeItem[]>([]);
  60 + const treeLoading = ref(false);
  61 +
50 function handleCheck(checkedKeys, e) { 62 function handleCheck(checkedKeys, e) {
51 console.log('onChecked', checkedKeys, e); 63 console.log('onChecked', checkedKeys, e);
52 } 64 }
  65 +
  66 + function loadTreeData() {
  67 + treeLoading.value = true;
  68 + // 以下是模拟异步获取数据
  69 + setTimeout(() => {
  70 + // 设置数据源
  71 + tree2.value = cloneDeep(treeData);
  72 + treeLoading.value = false;
  73 + // 展开全部
  74 + nextTick(() => {
  75 + console.log(unref(asyncExpandTreeRef));
  76 + unref(asyncExpandTreeRef)?.expandAll(true);
  77 + });
  78 + }, 2000);
  79 + }
  80 +
53 const tree = ref([ 81 const tree = ref([
54 { 82 {
55 title: 'parent ', 83 title: 'parent ',
@@ -82,7 +110,17 @@ @@ -82,7 +110,17 @@
82 }, 1000); 110 }, 1000);
83 }); 111 });
84 } 112 }
85 - return { treeData, handleCheck, tree, onLoadData, asyncTreeRef }; 113 + return {
  114 + treeData,
  115 + handleCheck,
  116 + tree,
  117 + onLoadData,
  118 + asyncTreeRef,
  119 + asyncExpandTreeRef,
  120 + tree2,
  121 + loadTreeData,
  122 + treeLoading,
  123 + };
86 }, 124 },
87 }); 125 });
88 </script> 126 </script>