vue实现简单树

Vue 实现简单树形结构

使用 Vue 实现树形结构可以通过递归组件或第三方库完成。以下是两种常见方法：

递归组件实现

创建递归组件 TreeItem，通过组件自身调用自身实现无限层级嵌套：

<template>
  <div>
    <div @click="toggle">
      {{ node.name }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <div v-show="isOpen && hasChildren">
      <TreeItem 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    node: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

在父组件中使用：

<template>
  <div>
    <TreeItem v-for="node in treeData" :key="node.id" :node="node"/>
  </div>
</template>

<script>
import TreeItem from './TreeItem.vue'

export default {
  components: { TreeItem },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent 1',
          children: [
            { id: 2, name: 'Child 1' },
            { id: 3, name: 'Child 2' }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库

安装 vue-tree-halower 库：

npm install vue-tree-halower

使用示例：

<template>
  <div>
    <tree
      :data="treeData"
      :options="options"
      @node:selected="onNodeSelected"
    />
  </div>
</template>

<script>
import { Tree } from 'vue-tree-halower'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          text: 'Parent',
          children: [
            { text: 'Child 1' },
            { text: 'Child 2' }
          ]
        }
      ],
      options: {
        roots: ['text'],
        editable: true
      }
    }
  },
  methods: {
    onNodeSelected(node) {
      console.log('Selected node:', node)
    }
  }
}
</script>

样式定制

为树形组件添加基础样式：

.tree-node {
  padding: 5px;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #f5f5f5;
}

.tree-children {
  margin-left: 20px;
}

功能扩展

添加复选框功能：

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="node.checked"
      @change="onCheckChange"
    >
    {{ node.name }}
    <div v-show="isOpen && hasChildren">
      <TreeItem 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onCheckChange() {
      this.$emit('checked', this.node)
    }
  }
}
</script>

这些方法提供了从基础到进阶的树形结构实现方案，可根据项目需求选择适合的方式。