vue3 form表单 树状

在 Vue 3 中创建一个树状的表单可以通过嵌套组件的方式实现。下面是一个简单的示例：

首先，创建一个名为 `TreeNode` 的组件，用于表示树节点：

<template>
  <div>
    <label>
      <input type="checkbox" v-model="node.checked" />
      {{ node.name }}
    </label>
    <ul v-if="node.children.length">
      <li v-for="child in node.children" :key="child.id">
        <TreeNode :node="child" />
      </li>
    </ul>
  </div>
</template>

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

然后，在你的父组件中使用 `TreeNode` 组件来构建树表单：

<template>
  <div>
    <h2>树状表单示例</h2>
    <TreeNode :node="treeData" />
  </div>
</template>

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

export default {
  name: 'TreeForm',
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: {
        name: 'Node 1',
        checked: false,
        children: [
          {
            name: 'Node 1.1',
            checked: false,
            children: []
          },
          {
            name: 'Node 1.2',
            checked: false,
            children: [
              {
                name: 'Node 1.2.1',
                checked: false,
                children: []
              },
              {
                name: 'Node 1.2.2',
                checked: false,
                children: []
              }
            ]
          }
        ]
      }
    };
  }
};
</script>

在上面的示例中，`treeData` 对象表示树的数据结构。`TreeNode` 组件递归地渲染每个节点，并且使用 `v-model` 来绑定复选框的选中状态。

这样，你就可以在 Vue 3 中创建一个树状的表单了。你可以根据实际需求来自定义组件样式和处理表单数据的逻辑。