vue 递归树形 带复选框

Vue递归树形带复选框的实现可以通过以下步骤进行：

1. 首先，创建一个Vue组件来表示树形结构的节点。在该组件中，使用递归方式在模板中嵌套该组件自身，以实现树形结构。

<template>
  <div>
    <!-- 绑定复选框的状态 -->
    <input type="checkbox" v-model="checked" @change="handleChange"/>
    {{ node.name }}
    <div v-if="node.children">
      <!-- 递归嵌套子节点 -->
      <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      // 复选框状态改变时，操作节点的选中状态
      this.node.checked = this.checked;
    }
  }
}
</script>

2. 在父组件中加载树形组件，并传递树形结构的数据作为props。

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

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

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: {
        id: 1,
        name: 'Root',
        children: [
          {
            id: 2,
            name: 'Child 1',
            children: [
              {
                id: 3,
                name: 'Subchild 1'
              },
              {
                id: 4,
                name: 'Subchild 2'
              }
            ]
          },
          {
            id: 5,
            name: 'Child 2',
            children: [
              {
                id: 6,
                name: 'Subchild 3'
              }
            ]
          }
        ]
      }
    };
  }
}
</script>

在以上代码中，我们使用递归的方式将树形结构中的每个节点都生成一个TreeNode组件，并将对应节点的数据作为props传递给子组件。在TreeNode组件中，使用v-model绑定复选框的选中状态，当复选框的状态改变时，也改变节点的选中状态。