现在的众多UI框架都提供了较为优秀的表单组件以供使用,初级前端可以用最简单的模板语句书写表单,样式精美,而且还帮我们做了大量关于数据绑定、错误验证等等的工作,不论什么框架都可以让我们快速用模板式的代码编写精美的表单。
然而web前端都需要设计制作大量的表单,除了喜闻乐见的用户登录、查询外,有许多更加复杂也可能十分琐碎的表单需要你来编写。
这时可能模板式的语言就显得啰嗦而费时间。
初级前端可能还很或许还未深入学会高效地运用渲染函数,那么json to form 的第三方组件就可能是你的最佳选择。市面上有一定数量的第三方组件可供选择。
比如form-create
具有动态渲染,数据收集,验证和提交功能的表单生成器,内置17种常用表单组件,支持双向数据绑定,事件扩展,并支持使用json生成内置组件和任何vue组件 。
支持ElementUI 和 iViewUI,持续更新。
通过简单json数据就可以快速创建优秀的表单,不用在template和script反复横跳了。
![v2-18ec00999194114804d687fe2f9837a6_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=00ba24a6-542e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-18ec00999194114804d687fe2f9837a6_b.jpg)
![v2-4e3d3d0e1b507496cda1a222132e3c63_ipico.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=00ba24a6-542e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-4e3d3d0e1b507496cda1a222132e3c63_ipico.jpg)
如果你使用的是vuetify,那么也有 vjsf的支持:
@koumoul/vjsfwww.npmjs.com![v2-338e4905a2684ca96e08c7780fc68412_180x120.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=00ba24a6-542e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-338e4905a2684ca96e08c7780fc68412_180x120.jpg)
也在持续更新中。
借助json 编写工具,你也可以摆脱花括号的困扰
![v2-b26f961689e4b153aba9504f18ce7773_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=00ba24a6-542e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-b26f961689e4b153aba9504f18ce7773_b.jpg)
通过x-class 设置表单内各个元素的位置大小,比如:
![v2-e759a5b7163437944f6a05c1e49023ba_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=00ba24a6-542e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-e759a5b7163437944f6a05c1e49023ba_b.jpg)
包括各大热门表单组件,比如选择日期、多选单选等等操作。
并且可以设定规则,自动报错。
详见文档。
vjsf - Documentationkoumoul-dev.github.io