1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <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>
|