通过自定义表单配置，渲染、验证、获取表单数据

痛点

在很多中后台管理中，会遇到很多数据编辑场景，这里就需要用到表单编辑，之前相信大多数coder都要遇到，如果表单数据过多就需要书写很多重复的代码，久而久之就有了烦躁的心情，感觉天天写同样的表单代码，千篇一律没什么前途

思考

提供一套工具，自定义配置表单后，将配置数据生成一段JSON维护，然后在通过这段JSON数据将表单渲染出来，同时能对数据进行校验，最后获取到表单填写的数据。

解决

npm install form-making -S

or

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

具体的使用方法请查看 github地址：github.com/GavinZhuLei…

下面争对这套工具进行简单的功能介绍

介绍

工具提供两个组件 MakingForm(表单配置)，GenerateForm(表单渲染)

首先看看 MakingForm 的功能介绍，演示地址：tools.xiaoyaoji.cn/form-markin…

预览可以实时预览你编辑表单的表单渲染的效果，并可以查看获取到填写的数据结构

生成JSON操作为渲染组件生成JSON数据

接下来就是 GenerateForm 如何使用，这里默认你已经将该组件正确引入项目

<fm-generate-form 
    :data="jsonData" 
    :remote="remoteFuncs" 
    ref="generateForm">
</fm-generate-form>

new Vue({
    ...
    data () {
        return {
            jsonData: {}, // 表单配置中生成的json数据
            values: {}, // 例如:编辑的情况下表单获取的编辑数据
            remoteFuncs: {
                // 组件配置时配置的远端方法,保持和配置时输入的名称一致
                func_test (resolve) {
                  // 模拟接口请求
                  setTimeout(() => {
                    const options = [
                      {id: '1', name: '1111'},
                      {id: '2', name: '2222'},
                      {id: '3', name: '3333'}
                    ]
                    
                    // 获取到的值和标签可以通过配置页远端配置
                    // 值:id  标签：name
        
                    resolve(options) // 将后端获取的数据放入回调函数中
                  }, 2000)
                }，
                func_test2....
            }
        }
    },
    methods: {
        ...{
            // 调用此方法验证表单数据和获取表单数据
            this.$refs.generateForm.getData().then(data => {
                // 数据校验成功
                // data 为获取的表单数据
            }).catch(e => {
                // 数据校验失败
            })
        }
    }
})

自此一个表单就制作完毕

结束

后续会对工具的组件逐渐增加和完善，并且会加入生成代码功能，解决某些奇葩需求该工具无法做到的情况。

欢迎大家提建议和吐槽，github地址：github.com/GavinZhuLei…