File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<ul class="tree-node">
<li
:class="{
'p-tree cursor mb5': true,
selected: displaySelectedNode === displayNode.id,
}"
@click="toggleNode(displayNode.id)"
:title="displayNode.nm"
>
<p class="node-name">{{ displayNode.nm }}</p>
</li>
<ul v-if="isOpen && displayNode.childList.length" class="child-node pl20">
<li v-for="child in displayNode.childList" :key="child.id">
<Hierachy
:nodeList="child"
:icon="icon"
:selectedNode="selectedNode"
@changeSelected="findByChildNode"
/>
</li>
</ul>
</ul>
</template>
<script>
import { mdiChevronRight, mdiChevronDown } from "@mdi/js";
export default {
name: "Hierachy",
props: {
nodeList: {
type: Object,
required: true,
},
icon: {
required: true,
},
selectedNode: {
type: String,
},
},
data() {
return {
isOpen: false,
};
},
methods: {
toggleNode(node) {
this.isOpen = !this.isOpen;
this.$emit("changeSelected", node);
},
iconPath() {
return this.isOpen ? mdiChevronDown : mdiChevronRight;
},
findByChildNode(node) {
this.$emit("changeSelected", node);
},
},
watch: {},
computed: {
displayNode() {
return this.nodeList;
},
displaySelectedNode() {
return this.selectedNode;
},
},
components: {},
mounted() {},
};
</script>