Question

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

我将提供两个示例

文档示例1：

https://pastebin.com/xYCdJGwL

文档示例2：

https://pastebin.com/5RY3bsfL

属性说明：

ID =>该输入字段的ID
Value =>该输入字段的值和默认初始化
标题=>该输入字段的标题
数据类型=>数据类型表示要返回的值的类型。可能的数据类型可能是字符串，整数，浮点数，日期时间
Cardinal =>需要将多少个值返回给服务器？如果为 1 ，则仅需要返回一个值；如果为 n ，则将不确定数量的值传递回服务器。
主=>是否与其他字段相关？如果为空，或者为“ 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>

因此，我知道我可以使用3000行（或更多）充满if语句的代码的JavaScript解决此问题。如果需要，是否可以通过提供的数据类型和设置依赖项来创建文本字段组件，数字字段，日期字段……？

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

请让我知道是否缺少某些信息！

Answer 1

您的任务有很多挑战：

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

建议：

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

P.S。您可以搜索already done个或大部分

的库

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

1 个答案: