优雅地用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,
            "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行