vue 根据字符串生成表单_【vue系列】优雅地用 vue 生成动态表单（一）

需求背景

开需求会了，产品说这次需求的表单比较多，目前有19个，后期的表单可能会有增加、修改。我作为这次的前端开发负责人，看到这样的需求，心里知道要这样搞不得把前端累死，首先表单居多，还要变更，以后维护起来也让人心力憔悴。

于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单得管理。后来重新评审了需求，系统部分由后端自行开发，前端要处理的部分是动态生成表单，展现提交的表单，以及对表单的处理情况。

数据接口设计

表单类型的接口就不用说了，这个比较简单。我跟后端约定了一个预备创建工单接口，这个接口是后端告知前端，需要生成一个什么样的表单。

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

id 表单字段的id

name 表单字段的名称(存数据库的字段名)

type 表单字段的类型(select_item下拉列表、string单行文本、multiple多行文本、integer单行数字、images上传图片)

title 表单字段的中文名(动态表单的字段名称)

prompt_msg 表单字段的placeholder文案

selectObj type类型为select_item的时候，selectObj有值，默认为null

{

"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,