具体请参考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定义的例子