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

【问题标题】：create highly dynamic input form components创建高度动态的输入表单组件
【发布时间】：2019-06-29 00:46:53
【问题描述】：

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

我将提供两个示例

文档示例 1：

https://pastebin.com/xYCdJGwL

文档示例 2：

https://pastebin.com/5RY3bsfL

属性说明：

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

这里的事情变得非常棘手。

需要向服务器传递什么？

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

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

实施：

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

<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 和 3000 行（或更多）充满 if 语句的代码来解决这个问题。有没有办法通过交付的数据类型和设置依赖项（如果需要）创建文本字段组件、数字字段、日期字段……？

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

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

【问题讨论】：

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

标签： javascript vue.js

【解决方案1】：

您的任务中有多个挑战：

动态组件创建
复杂的组件关系
保存输入

建议：

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

附：您可以搜索 already done 或大部分的库

【讨论】：