Javascript 创建高度动态的输入表单组件

我想生成高度可定制的输入表单。我从外部数据库接收到一个表示所需输入表单结构的对象

我将提供两个例子

文档示例1：

文档示例2：

属性说明：

ID=>该输入字段的ID Value=>该输入字段的值和默认初始化 Caption=>该输入字段的标题 Datatype=>数据类型表示要返回的值的类型。可能的数据类型可以是字符串、整数、浮点、日期时间 基数=>需要返回多少个值到服务器？如果值为1，则只需要返回一个值；如果值为n，则不确定数量的值会传递回服务器。 Master=>是否与其他字段存在依赖关系？如果它是空的、self或none，则不存在依赖项。如果存在依赖项，则此输入引用其他输入。例如，下拉组件侦听第二个下拉组件，并在其他下拉框中选择项目时将其项目更改为“选择”。 这里的事情变得很棘手

需要将什么传递到服务器

它只需要每个表单组件的ID和值。每个前端应用程序都可以以不同的方式解决问题

这里有一些动态输入表单的例子，语言是德语，但这不重要

实施：

每个数据对象代表一个输入表单。它创建一个遮罩组件并传入结果属性

<template>
    <form class="mask" @submit.prevent="saveMask">
      <MaskItem v-for="maskItem in documentData" :key="maskItem.ID" :maskItemData="maskItem"/>
      <button id="btnSave" type="submit">
        Save
      </button>
    </form>
</template>

<script>
import MaskItem from "./maskItem.vue";

export default {
  name: "mask",
  components: {
    MaskItem
  },
  props: {
    documentData: Array /* The RESULT array from the document object */
  },
  methods: {
    saveMask: function(){
      // loop through all maskItems and get the ID and their value
    }
  }
};
</script>

掩码本身应该为每个数组项创建一个输入组件

<template>
    <div class="maskItem">
        Item
    </div>
</template>

<script>
export default {
  name: "maskItem",
  props: {
    maskItemData: Object
  }
};
</script>

因此，我知道我可以使用JavaScript解决这个问题，JavaScript包含3000行代码或更多if语句。有没有办法创建文本字段组件、数字字段、日期字段等。。。根据交付的数据类型和设置依赖项（如果需要）

正如我提到的，服务器只需要该组件的ID和一个或多个值，因此可能有多个解决方案来解决这个问题

---

如果缺少一些信息，请告诉我

您的任务中有多个挑战：

动态组件创建 复杂组件关系 节省物 输入 建议：

动态组件创建应使用。 组件关系是IMHO中最难的部分，要解决它，您需要更好地定义可用的选项，并在此基础上构建您的组件和周围的代码，这里没有魔法 要保存输入，您应该有一个方法或计算函数来从组件数组收集所需的数据。可以通过从动态组件发出自定义事件来完成。

---

另外，您可以搜索该库，或其中大部分库

您如何定义关系？您可以像country city一样轻松定义父子关系，但当您选择一个国家/地区时，必须从服务器检索城市，除非您计划在documentData中包含所有城市，从而导致复杂的对象结构。这两个选项都可以。我可以在开始时加载所有可能性，但在父控件中选择项目时，我也可以按需加载。@munimuna非常感谢您的帮助。我会尽快检查的