admin/src/views/demo/tree/index.vue

<template>
  <PageWrapper title="Tree基础示例">
    <Row :gutter="[16, 16]">
      <Col :span="8">
        <BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1">
          <template #icon><SmileTwoTone /></template>
          <template #title>666</template>
          <template #switcherIcon> <CarryOutOutlined /></template>
        </BasicTree>
      </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="8">
        <Card title="异步数据，默认展开">
          <template #extra>
            <a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
          </template>
          <Spin :spinning="treeLoading">
            <BasicTree ref="asyncExpandTreeRef" :treeData="tree2" />
          </Spin>
        </Card>
      </Col>
      <Col :span="8">
        <Card title="BasicTree内置加载">
          <template #extra>
            <a-button @click="loadTreeData2" :loading="treeLoading">请求数据</a-button>
          </template>
          <BasicTree ref="loadTreeRef" :treeData="tree2" :loading="treeLoading" />
        </Card>
      </Col>
    </Row>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { nextTick, ref, unref } from 'vue';
  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
  import { treeData } from './data';
  import { PageWrapper } from '@/components/Page';
  import { Card, Row, Col, Spin } from 'ant-design-vue';
  import { cloneDeep, uniq } from 'lodash-es';
  import { isArray } from '@/utils/is';
  import { type Nullable } from '@vben/types';
  import { SmileTwoTone, CarryOutOutlined } from '@ant-design/icons-vue';

  const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
  const loadTreeRef = 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);
  }
  function loadTreeData2() {
    treeLoading.value = true;
    // 以下是模拟异步获取数据
    setTimeout(() => {
      // 设置数据源
      tree2.value = cloneDeep(treeData);
      treeLoading.value = false;
    }, 2000);
  }

  const tree = ref([
    {
      title: 'parent ',
      key: '0-0',
    },
  ]);

  function onLoadData(treeNode) {
    return new Promise((resolve: (value?: unknown) => void) => {
      if (isArray(treeNode.children) && treeNode.children.length > 0) {
        resolve();
        return;
      }
      setTimeout(() => {
        const asyncTreeAction: TreeActionType | null = unref(asyncTreeRef);
        if (asyncTreeAction) {
          const nodeChildren = [
            { title: `Child Node ${treeNode.eventKey}-0`, key: `${treeNode.eventKey}-0` },
            { title: `Child Node ${treeNode.eventKey}-1`, key: `${treeNode.eventKey}-1` },
          ];
          asyncTreeAction.updateNodeByKey(treeNode.eventKey, { children: nodeChildren });
          asyncTreeAction.setExpandedKeys(
            uniq([treeNode.eventKey, ...asyncTreeAction.getExpandedKeys()]),
          );
        }

        resolve();
        return;
      }, 300);
    });
  }
</script>