记录基于Vue.js的移动端Tree树形组件

<template>
  <div class="tree-container">
    <TreeNode
      v-for="(node, index) in nodes"
      :key="node.id"
      :node="node"
      :index="index"
      :data="node"
      @delete-node="handleDeleteNode"
      @add-node="handleAddNode"
      @edit-node="handleEditNode"
    />
  </div>
</template>

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

export default {
  components: {
    TreeNode
  },
  props: {
    nodes: Array
  },
  methods: {
    handleDeleteNode(node) {
      // 处理删除节点的逻辑
      console.log('Delete node:', node);
    },
    handleAddNode(node) {
      // 处理添加子节点的逻辑
      console.log('Add node:', node);
    },
    handleEditNode(node) {
      // 处理编辑节点的逻辑
      console.log('Edit node:', node);
    }
  }
};
</script>

<style scoped>
.tree-container {
  /* 样式按需定制 */
}
</style>