siteTree.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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. // props & emits
  17. const props = defineProps<{ treeData?: MonitorSiteTreeNode }>();
  18. const emit = defineEmits<{ select: [value: MonitorSiteTreeNode] }>();
  19. const processedTreeData = ref<TreeNode[]>([
  20. {
  21. title: '暂无数据',
  22. key: '0',
  23. disabled: true,
  24. children: [],
  25. },
  26. ]);
  27. const expandedKeys = ref<string[]>([]);
  28. // 递归处理树节点并格式化为需要的格式,将父节点记录到指定数组中
  29. function walk(node: MonitorSiteTreeNode, parentNodeKeys: string[]): TreeNode {
  30. // 在这里赋值
  31. const res: TreeNode = {
  32. title: node.label,
  33. key: node.id,
  34. disabled: !!node.display,
  35. raw: node,
  36. children: [],
  37. };
  38. if (node.children) {
  39. // 记录所有的父节点id
  40. parentNodeKeys.push(node.id);
  41. node.children.forEach((child) => {
  42. res.children.push(walk(child, parentNodeKeys));
  43. });
  44. }
  45. return res;
  46. }
  47. function selectHandler(_, { selectedNodes }) {
  48. emit('select', selectedNodes.raw);
  49. }
  50. // 更新逻辑在这里
  51. watch(
  52. () => props.treeData,
  53. (v) => {
  54. if (!v) return;
  55. expandedKeys.value = [];
  56. processedTreeData.value = [walk(v, expandedKeys.value)];
  57. },
  58. {
  59. immediate: true,
  60. },
  61. );
  62. defineExpose({
  63. processedTreeData,
  64. expandedKeys,
  65. });
  66. </script>