vent-forewarn-micro/src/views/vent/monitor/site/components/siteTree.vue

<template>
  <Tree
    :tree-data="processedTreeData"
    :expanded-keys="expandedKeys"
    :default-expand-all="true"
    :auto-expand-parent="true"
    :virtual="false"
    @select="selectHandler"
  />
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { Tree } from 'ant-design-vue';
  import { MonitorSiteTreeNode } from '@/api/sys/model/monitorModel';
  import { TreeNode } from '../types/siteTree';

  // props & emits
  const props = defineProps<{ treeData?: MonitorSiteTreeNode }>();
  const emit = defineEmits<{ select: [value: MonitorSiteTreeNode] }>();

  const processedTreeData = ref<TreeNode[]>([
    {
      title: '暂无数据',
      key: '0',
      disabled: true,
      children: [],
    },
  ]);
  const expandedKeys = ref<string[]>([]);

  // 递归处理树节点并格式化为需要的格式，将父节点记录到指定数组中
  function walk(node: MonitorSiteTreeNode, parentNodeKeys: string[]): TreeNode {
    // 在这里赋值
    const res: TreeNode = {
      title: node.label,
      key: node.id,
      disabled: !!node.display,
      raw: node,
      children: [],
    };

    if (node.children) {
      // 记录所有的父节点id
      parentNodeKeys.push(node.id);
      node.children.forEach((child) => {
        res.children.push(walk(child, parentNodeKeys));
      });
    }

    return res;
  }

  function selectHandler(_, { selectedNodes }) {
    emit('select', selectedNodes.raw);
  }

  // 更新逻辑在这里
  watch(
    () => props.treeData,
    (v) => {
      if (!v) return;
      expandedKeys.value = [];
      processedTreeData.value = [walk(v, expandedKeys.value)];
    },
    {
      immediate: true,
    },
  );

  defineExpose({
    processedTreeData,
    expandedKeys,
  });
</script>