vue实现tree

Vue 实现 Tree 组件

使用 Vue 实现 Tree 组件可以通过递归组件的方式来实现层级结构展示。以下是一个完整的实现方法：

基础递归组件实现

创建 Tree 组件文件 Tree.vue，使用递归方式渲染子节点：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <div @click="toggle(node)">
        {{ node.label }}
      </div>
      <Tree 
        v-if="node.children && node.expanded" 
        :nodes="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    nodes: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

数据格式要求

组件需要接收特定格式的树形数据，示例数据结构如下：

const treeData = [
  {
    id: 1,
    label: 'Node 1',
    expanded: true,
    children: [
      {
        id: 2,
        label: 'Node 1.1',
        children: []
      },
      {
        id: 3,
        label: 'Node 1.2',
        expanded: false,
        children: [
          {
            id: 4,
            label: 'Node 1.2.1',
            children: []
          }
        ]
      }
    ]
  }
]

添加复选框功能

扩展 Tree 组件支持复选框选择：

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <div>
        <input 
          type="checkbox" 
          v-model="node.checked"
          @change="handleCheckChange(node)"
        >
        <span @click="toggle(node)">
          {{ node.label }}
        </span>
      </div>
      <Tree 
        v-if="node.children && node.expanded" 
        :nodes="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleCheckChange(node) {
      this.updateChildNodes(node, node.checked)
      this.updateParentNodes(node)
    },
    updateChildNodes(node, checked) {
      if (node.children) {
        node.children.forEach(child => {
          this.$set(child, 'checked', checked)
          this.updateChildNodes(child, checked)
        })
      }
    },
    updateParentNodes(node) {
      // 实现父节点根据子节点状态更新的逻辑
    }
  }
}
</script>

样式优化

添加基础样式使 Tree 组件更美观：

ul {
  list-style: none;
  padding-left: 20px;
}

li {
  margin: 5px 0;
}

div {
  cursor: pointer;
  display: flex;
  align-items: center;
}

input[type="checkbox"] {
  margin-right: 8px;
}

动态加载子节点

实现异步加载子节点的功能：

<script>
export default {
  methods: {
    toggle(node) {
      if (!node.childrenLoaded && node.hasChildren) {
        this.loadChildren(node)
      } else {
        this.$set(node, 'expanded', !node.expanded)
      }
    },
    async loadChildren(node) {
      try {
        const children = await fetchChildren(node.id)
        this.$set(node, 'children', children)
        this.$set(node, 'childrenLoaded', true)
        this.$set(node, 'expanded', true)
      } catch (error) {
        console.error('加载子节点失败:', error)
      }
    }
  }
}
</script>

完整组件使用示例

在父组件中使用 Tree 组件：

<template>
  <div>
    <h3>Tree Component</h3>
    <Tree :nodes="treeData" />
  </div>
</template>

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

export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Root Node',
          expanded: true,
          children: [
            {
              id: 2,
              label: 'Child Node 1',
              children: []
            },
            {
              id: 3,
              label: 'Child Node 2',
              children: []
            }
          ]
        }
      ]
    }
  }
}
</script>

以上实现提供了 Tree 组件的基本功能，包括展开/折叠、复选框选择、异步加载等特性。可以根据实际需求进一步扩展功能，如拖拽排序、节点编辑等。