[JavaScript知识库]动态表单的实现

前言

? ? ? ?在做一些数据展示类的系统项目的时候，我们会遇到一些项目有很多需要展示的表单的内容，如果是已经设定好的字段，我们可以直接按照需求上来实现。但是在一些大的项目页面上展示的内容是通过前面的配置页面动态生成的情况我们如何是实现呢？

实现方法

我们以vue的项目为例，其他框架的实现的方法大体相同的，只是写法有些不一样

1.因为是做动态的表单，数据肯定是从后台动态获取的，实现之前我们应该要把参数约定好，例如：

    this.formArr = [
      {
        key: "name",
        vulue: "laohu",
        type: "input",
        disabled: true,
      },
      {
        key: "time",
        vulue: "shijian",
        type: "time",
        disabled: true,
      },
      {
        key: "id",
        vulue: "iii",
        type: "list",
        disabled: false,
      },
    ];

2.约定好参数我们需要再在data里定义一个空对象formData，再在html里用v-for循环这个数组，用v-model绑定对象formData[item.key]；目前我们这只写了一个，如果有一些多的参数例如校验和字段的长度限制，还有置灰的控制都是类似的操作了

<div>
    <div v-for="item in formArr" :key="item.key">
      <input
        v-if="item.type === 'input'"
        type="text"
        :disabled="item.disabled"
        v-model="formData[item.key]"
      />
    </div>
  </div>