vue实现tree组件

Vue实现Tree组件的方法

数据结构设计

Tree组件通常需要递归渲染节点，数据结构应包含层级关系。常见的结构如下：

const treeData = [
  {
    id: 1,
    label: 'Parent 1',
    children: [
      {
        id: 2,
        label: 'Child 1'
      }
    ]
  }
]

递归组件实现

使用Vue的递归组件特性，通过name属性自引用：

<template>
  <ul>
    <li v-for="node in data" :key="node.id">
      {{ node.label }}
      <tree-node v-if="node.children" :data="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    data: Array
  }
}
</script>

展开/折叠功能

添加点击事件控制子节点显示状态：

<template>
  <ul>
    <li v-for="node in data" :key="node.id">
      <span @click="toggle(node)">{{ node.expanded ? '-' : '+' }}</span>
      {{ node.label }}
      <tree-node 
        v-if="node.children && node.expanded" 
        :data="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    toggle(node) {
      this.$set(node, 'expanded', !node.expanded)
    }
  }
}
</script>

复选框功能

添加复选框并实现全选/半选状态：

<template>
  <ul>
    <li v-for="node in data" :key="node.id">
      <input 
        type="checkbox" 
        v-model="node.checked"
        @change="handleCheck(node)"/>
      {{ node.label }}
      <tree-node 
        v-if="node.children && node.expanded" 
        :data="node.children"
        @check-change="onChildCheckChange"/>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    handleCheck(node) {
      this.updateChildChecked(node, node.checked)
      this.$emit('check-change', node)
    },
    updateChildChecked(node, checked) {
      if (node.children) {
        node.children.forEach(child => {
          child.checked = checked
          this.updateChildChecked(child, checked)
        })
      }
    }
  }
}
</script>

动态加载数据

实现异步加载子节点：

<script>
export default {
  methods: {
    loadChildren(node) {
      if (!node.childrenLoaded) {
        api.getChildren(node.id).then(children => {
          this.$set(node, 'children', children)
          this.$set(node, 'childrenLoaded', true)
        })
      }
    }
  }
}
</script>

样式优化

添加CSS增强交互体验：

ul {
  list-style: none;
  padding-left: 20px;
}
li {
  cursor: pointer;
  margin: 5px 0;
}

完整组件封装

将Tree组件封装为可复用的全局组件：

// main.js
import Tree from './components/Tree.vue'

Vue.component('Tree', Tree)

使用时只需传入数据：

<template>
  <Tree :data="treeData"/>
</template>