哈喽哈喽，大家好。
今天和大家分享一下，在vue中，如果高效的开发表单。
首先我们来确定表单的功能，表单主要是用来收集用户数据的信息，然后提交后台。也就是需要在页面上提供一些列的输入框，用户完成输入后，通过提交按钮，触发表单验证，验证不通过则提示错误，验证通过则将收集的信息发送给后台，后台处理完成后，提示前端成功还是失败。按照业务功能来说，表单分为新建和编辑两种，其中数据验证，提交的逻辑都是一样的，只是编辑的场合，事先需要根据记录的ID加载待编辑的数据 来填充表单。然后 编辑的提交 通常 是增量修改，就是只提交变化的部分。
以往我们开发表单，需要完成以下几个步骤。
1. 构建layout，就是准备各种输入框，备选项（单选按钮、复选按钮、下拉列表），确定报错消息展示的位置。
2. 表单验证
3. 表单数据提交，提交之前可能需要对待提交的数据做一下处理，以满足接口要求。
在vue环境中，大家可能首先会想到用element-ui，因为它美化了输入组件，定义来标准form的开发模式，提供了表单验证的功能，使用element-ui可以帮大家开发出简约大方的form表单。
下图是一个典型的element-ui的form
这里是上面表单的layout部分的代码截图
下面是它的表单验证的部分
具体请参考element-ui的官方文档
https://element.eleme.cn/#/zh-CN/component/form
可以说element-ui在很大程度上，帮大家用最少的代码 完成了产品级表单页面的开发。但是我们依然要处理大量的layout的代码，而这些代码看起来都是重复的代码，自己写虽然灵活度高，但是有没有办法自动完成呢。而且使用element-ui我们依然是要处理表单提交，以及编辑时候的数据拉取，这些事实上在各个表单中，也都是雷同的工作，不同的表单，处理方式应该都是一样的，仅仅是 提交数据的接口不一样，基于这个总结，我们可以做一个 表单组件，通过url指定要提交数据的位置，通过inputs传入表单输入项目的定义，然后让这个form组件 自动完成layout绘制，数据拉取，表单验证，数据提交等一些列动作。
tsyvue中定义的 sy-form表单就完成了我上面描述的工作。
http://tsy.zone/tsyvue/sy-form
tsyvue是为了进一步简化项目开发，根据本人多年的开发经验，提炼出项目中大量的共通代码形成的扩展组件库，通过npm发布，大家可以在自己的vue工程下运行以下命令来安装
npm install tsyvue -S
通过tsyvue的sy-form构建一个用来 新建数据据的表单，layout的部分只要提供如下代码即可。
sy-form(:inputs='formInputs' url='/example/form/url')
这里模板部分使用的pug语言，相较html更加简洁。
可以看到，sy-form仅仅接收了一个url，表示最终数据要提交的位置。以及inputs，定了表单输入项目，剩下绘制表单，验证数据，提交数据，就都交给sy-form来完成了。
下面时input定义的例子
目前sy-from能够满足大部分场景的需求，下图时基于sy-form绘制的表单的例子。
可以看到支持input radio select checkbox datepicker等多种输入框，这里面的 单选按钮 多选按钮 下拉框 都是 tsyvue 的 sy-options组件渲染的，具体如何使用，请参考tsyvue的文档，并下载例子调试
sy-options是备选项，可以通过type指定外观，外观 支持 下拉列表，单选按钮，复选按钮等，有单选和多选模式，至此从接口获取备选项，或者前端提供备选项。详细用法请参考http://tsy.zone/tsyvue/sy-options