Vueコンポーネント開発：ツリー構造コンポーネントの実装方法

<template>
  <div>
    <ul>
      <li v-for="node in nodes" :key="node.id">
        <span v-if="node.children && node.children.length > 0" @click="toggleNode(node)">
          {{ node.name }}
          <i v-if="expandedNodes.includes(node.id)" class="icon-arrow-down"></i>
          <i v-else class="icon-arrow-right"></i>
        </span>
        <span v-else>
          {{ node.name }}
        </span>
        <tree-node v-if="expandedNodes.includes(node.id)" :nodes="node.children"></tree-node>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    nodes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      expandedNodes: []
    }
  },
  methods: {
    toggleNode(node) {
      if (this.expandedNodes.includes(node.id)) {
        this.expandedNodes = this.expandedNodes.filter(id => id !== node.id);
      } else {
        this.expandedNodes.push(node.id);
      }
    }
  }
}
</script>

<style>
.icon-arrow-down {
  /* 样式省略 */
}

.icon-arrow-right {
  /* 样式省略 */
}
</style>

<template>
  <div>
    <tree-node :nodes="treeData"></tree-node>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  name: 'TreeDemo',
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '节点1',
          children: [
            { id: 2, name: '节点1.1' },
            { id: 3, name: '节点1.2' }
          ]
        },
        {
          id: 4,
          name: '节点2',
          children: [
            { id: 5, name: '节点2.1' },
            { id: 6, name: '节点2.2' }
          ]
        }
      ]
    }
  }
}
</script>