使用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行