|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="overflow-auto">
|
|
|
<Tree
|
|
|
v-if="processedTreeData.length"
|
|
|
:tree-data="processedTreeData"
|
|
@@ -10,7 +10,12 @@
|
|
|
>
|
|
|
<template #icon="scope">
|
|
|
<Icon v-if="scope.selected" icon="material-symbols:circle" color="green" />
|
|
|
- <Icon v-else-if="scope.selectable" icon="material-symbols:circle" />
|
|
|
+ <Icon v-else-if="scope.leaf && scope.selectable" icon="material-symbols:circle" />
|
|
|
+ <Icon
|
|
|
+ v-else-if="scope.leaf && !scope.selectable"
|
|
|
+ icon="material-symbols:circle"
|
|
|
+ color="red"
|
|
|
+ />
|
|
|
</template>
|
|
|
</Tree>
|
|
|
|
|
@@ -37,7 +42,8 @@
|
|
|
const res: TreeNode = {
|
|
|
title: node.label,
|
|
|
key: node.id,
|
|
|
- selectable: !!node.x,
|
|
|
+ selectable: !!node.display,
|
|
|
+ leaf: !!node.leafNode,
|
|
|
raw: node,
|
|
|
children: [],
|
|
|
};
|
|
@@ -77,3 +83,8 @@
|
|
|
expandedKeys,
|
|
|
});
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+ ::v-deep(.vMonitor-tree) {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+</style>
|