siteTree.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <Tree
  3. :tree-data="processedTreeData"
  4. :expanded-keys="expandedKeys"
  5. :default-expand-all="true"
  6. :auto-expand-parent="true"
  7. :virtual="false"
  8. @select="selectHandler"
  9. />
  10. </template>
  11. <script setup lang="ts">
  12. import { ref, watch } from 'vue';
  13. import { Tree } from 'ant-design-vue';
  14. import { MonitorSiteTreeNode } from '@/api/sys/model/monitorModel';
  15. import { TreeNode } from '../types/siteTree';
  16. const props = defineProps<{ treeData?: MonitorSiteTreeNode }>();
  17. const emit = defineEmits(['select']);
  18. const processedTreeData = ref<TreeNode[]>([
  19. {
  20. title: '暂无数据',
  21. key: '0',
  22. children: [],
  23. },
  24. ]);
  25. const expandedKeys = ref<string[]>([]);
  26. // 递归处理树节点并格式化为需要的格式
  27. function walk(node: MonitorSiteTreeNode, parentNodeKeys: string[]): TreeNode {
  28. const res: TreeNode = {
  29. title: node.label,
  30. key: node.id,
  31. children: [],
  32. raw: node,
  33. };
  34. if (node.children) {
  35. // 额外的,记录它们的key以将它们全部展开
  36. parentNodeKeys.push(node.id);
  37. node.children.forEach((child) => {
  38. res.children.push(walk(child, parentNodeKeys));
  39. });
  40. }
  41. return res;
  42. }
  43. function selectHandler(_, { selectedNodes }) {
  44. emit('select', selectedNodes.raw);
  45. }
  46. // 更新逻辑在这里
  47. watch(
  48. () => props.treeData,
  49. (v) => {
  50. if (!v) return;
  51. expandedKeys.value = [];
  52. processedTreeData.value = [walk(v, expandedKeys.value)];
  53. },
  54. {
  55. immediate: true,
  56. },
  57. );
  58. defineExpose({
  59. processedTreeData,
  60. expandedKeys,
  61. });
  62. </script>