vue实现树形分叉

vue实现树形分叉的方法

使用递归组件实现树形结构，通过v-for循环嵌套渲染子节点。组件调用自身时需通过name属性注册。

<template>
  <div class="tree-node">
    {{ node.name }}
    <tree-node 
      v-if="node.children && node.children.length"
      v-for="child in node.children"
      :node="child"
      :key="child.id">
    </tree-node>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  }
}
</script>

数据格式规范

树形数据需采用嵌套结构，每个节点包含children数组字段标识子节点。

const treeData = {
  id: 1,
  name: '根节点',
  children: [
    {
      id: 2,
      name: '子节点1',
      children: [
        { id: 3, name: '叶子节点1' }
      ]
    }
  ]
}

动态加载优化

大数据量时采用懒加载模式，通过@expand事件触发异步加载。

<tree-node 
  :load-data="loadData"
  @expand="handleExpand">
</tree-node>

methods: {
  handleExpand(node) {
    if (!node.children) {
      this.loadData(node).then(children => {
        this.$set(node, 'children', children)
      })
    }
  }
}

样式控制技巧

通过CSS变量控制缩进量，使用margin-left实现层级视觉区分。

.tree-node {
  margin-left: calc(var(--level) * 20px);
}

<tree-node 
  :style="{ '--level': level }">
</tree-node>

交互功能扩展

实现复选框联动需维护选中状态，通过@change事件向上传递状态。

watch: {
  'node.checked'(val) {
    this.$emit('change', { node: this.node, checked: val })
  }
}