使用Vue怎么生成一个动态表单

这篇文章给大家介绍使用Vue怎么生成一个动态表单，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联公司专注于临邑网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供临邑营销型网站建设，临邑网站制作、临邑网页设计、临邑网站官网定制、小程序制作服务，打造临邑网络公司原创品牌,更为您提供临邑网站排名全网营销落地服务。

数据接口设计

预备创建表单接口（其中字段解释说明）：

id
name
type
title
prompt_msg
selectObj

{
 "code": 0,
 "msg": "success",
 "data": {
 "list": [{
  "id": 10,
  "name": "check_type",
  "type": "select_item",
  "title": "审核类型",
  "prompt_msg": "请填写审核类型",
  "selectObj": [{
  "id": 1,
  "item": "预审核"
  }, {
  "id": 2,
  "item": "患者审核"
  }],
  "val": null,
  "rank": 0
 }, {
  "id": 16,
  "name": "bank_branch_info",
  "type": "string",
  "title": "支行信息",
  "prompt_msg": "请填写支行信息",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 19,
  "name": "project_content",
  "type": "multiple",
  "title": "项目内容",
  "prompt_msg": "请填写项目内容",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 22,
  "name": "project_extension_time",
  "type": "integer",
  "title": "项目延长时间",
  "prompt_msg": "请填写项目延长时间",
  "selectObj": null,
  "val": null,
  "rank": 0
 }, {
  "id": 24,
  "name": "images",
  "type": "images",
  "title": "图片",
  "prompt_msg": "请上传图片",
  "selectObj": null,
  "val": null,
  "rank": 0
 }]
 }
}

通过Vue动态组件渲染表单

现在预备创建表单接口文档都了，该怎么渲染动态表单呢？动态表单的元素类型有5类，按照这个类别创建五个元素组件。

1. 上传图片组件

上传图片组件这里使用了 Uploader 组件。

2. 多行输入框组件

默认多行输入框为3行