为此，我们将增加一个局部属性 showChildren 。如果他的值为False，子节点将不会被渲染。此值应通过点击节点切换，所以我们需要使用一个单击事件的监听器方法 toggleChildren 来进行管理。 template.vue 文件修改如下**：**
<template>
<div class="tree-menu">
<div :style="indent" @click="toggleChildren">{{ label }}</div>
<tree-menu
v-if="showChildren"
v-for="node in nodes"
:nodes="node.nodes"
:label="node.label"
:depth="depth + 1"
>
</tree-menu>
</div>
</template>
<script>
export default {
props: [ 'label', 'nodes', 'depth' ],
data() {
return { showChildren: false }
},
name: 'tree-menu',
computed: {
indent() {
return { transform: `translate(${this.depth * 50}px)` }
}
},
methods: {
toggleChildren() {
this.showChildren = !this.showChildren;
}
}
}
</script>
总结
这样，我们就有了一个工作树菜单。用来画龙点睛的一个方法是，你可以添加一个加号/减号图标，这样可以使UI的显示更加明显。我还增加了的很好的字体和计算性能在原来 showChildren 的基础上。
去CodePen（ https://codepen.io/anthonygore/pen/PJKNqa）可以看看我是如何实现它的。
