Vue前端树形控件展开关闭

在Vue中实现树形控件的开启和关闭，可以使用递归组件和v-if/v-else指令。以下是一个简单的示例：

<template>
  <div>
    <tree-node v-for="node in treeData" :key="node.id" :node="node"></tree-node>
  </div>
</template>
 
<script>
Vue.component('tree-node', {
  props: ['node'],
  data() {
    return {
      isOpen: false
    };
  },
  template: `
    <div>
      <div @click="toggle">{{ node.name }}</div>
      <div v-if="isOpen">
        <tree-node
          v-for="child in node.children"
          :key="child.id"
          :node="child">
        </tree-node>
      </div>
    </div>
  `,
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
});
 
export default {
  data() {
    return {
      treeData: [
        // 树形结构的数据
      ]
    };
  }
};
</script>

在这个示例中，tree-node组件用于递归表示每个节点。每个节点都有一个isOpen属性，用于跟踪该节点是否应该展开。点击节点名称会调用toggle方法切换isOpen的值，从而控制该节点下面的子节点是否显示。递归结束于节点没有子节点，或者isOpen为false。