本文共 4126 字，大约阅读时间需要 13 分钟。

需求背景

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

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

数据接口设计

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

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

• 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行

3. 下拉选择框组件

使用了element-ui的 el-select

 

// 单行文本输入框组件export { default as String } from './string.vue'  // 单行数字输入框组件export { default as Integer } from './integer.vue' // 多行文本输入框组件export { default as Multiple } from './multiple.vue' // 下拉列表选择器组件export { default as Select_item } from './select_item.vue' // 上传图片组件export { default as Images } from './images.vue'

再动态表单页面统一引入，以Vue动态组件的形式进行渲染，is属性为动态组件名。

 

上面完成后，动态表单展现出来了。表单是动态生成的，如何进行表单验证，和表单数据的汇总呢？

表单数据汇总

再动态渲染组件的，传入了 number 参数，这个参数用来标识当前组件位于动态表单的第几个，方便后期填入数据后，进行数据保存。

默认value属性值为空，对value进行监听，当value变动的时

候进行emit，告诉父组件数据变更了，请保存。

data() {    return {        value: ''    }},watch: {    value(v, o) {        this.throttleHandle(() => {            this.$emit('changeComponent', {                number: this.number,                value: this.$data.value            })        })    }},

但是数据保存到哪里？怎么保存呢？

让后端给一个表单全部字段的接口，取到数据存到data中，每次数据更新就去查找是否存在这个字段，有的话就赋值保存起来。后面提交的时候，就提交这个对象。

表单校验

提交的时候，希望用户能够把表单填完再调用提交接口，需要前端校验是否填完没有的话，就给响应的toast请提示，阻止表单提交。

this.checkFrom(freedomConfig, preWordorderData).then(canSubmit => {    canSubmit && postSubmitWorkorder(preWordorderData).then(res => {        if (res.code === 0) {            showLoading()            this.$router.push(`/detail/${res.data.id}`)        }    })})

checkFrom为我们的校验方法，循环遍历预创建表单，从data里查看该字段是否有值，没有的话就给于toast提示。并返回一个promise，resolve(false)。如果都校验通过返回 resolve(true)。这样就可以使checkFrom成为一个异步函数。

其中需要注意的是下拉框选择后的值为大于0的数字、上传图片的属性值是数组。

一个动态表单的创建、校验、数据整合就完成了。很多时候需要写大量代码的场景思路上很简单，反倒是抽象一个组件需要考虑的更多。

作者：胖脸猫

链接：https://www.jianshu.com/p/ae50ece6cbaa 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。