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 1 <template>
2 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 44 </PageWrapper>
39 45 </template>
40 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 49 import { treeData } from './data';
44 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 54 export default defineComponent({
47   - components: { BasicTree, PageWrapper },
  55 + components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
48 56 setup() {
49 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 62 function handleCheck(checkedKeys, e) {
51 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 81 const tree = ref([
54 82 {
55 83 title: 'parent ',
... ... @@ -82,7 +110,17 @@
82 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 126 </script>
... ...