手机版

Vue数据驱动表单渲染 轻松获取表单表单

时间:2021-08-21 来源:互联网 编辑:宝哥软件园 浏览:

表单-创建

具有动态渲染、数据采集、验证和提交功能的表单生成器支持双向数据绑定、事件扩展和自定义组件,可快速生成省市三级联动、时间选择和日期选择等17个功能组件。

Github |文档

Form-create是一个基于Vue的开源项目,可以快速生成iviewUI的表单元素。目的是节省开发人员在表单页面上花费的时间,从而更加专注于功能开发。使用form-creae快速方便地生成日常开发所需的各种表单。

让我们来介绍一下表单创建的用法和生成原理

示范

建设者

如何优雅地创建并动态生成输入输入框?

内置规则生成器用于生成组件规则的辅助方法,通过链式操作可以快速生成相应的组件规则。

数据

使用json数据生成。生成规则可以通过后端返回进行呈现。

Php表单生成器,这是我的另一个开源项目。表单规则由php生成,前端可以使用form-create根据参数直接呈现表单。这样,前端和后端可以很好地分离,后端也可以很容易地控制表单中的组件和字段。

动态渲染

当生成规则改变时,页面会实时更新。在1.5版本中,新的组件缓存功能将根据需要更新组件,这大大提高了渲染速度和性能。

动态渲染示例1

动态渲染示例2

自定义组件

Form-create支持生成任意自定义组件,包括嵌套使用form-create。

例如

在表单中生成iview按钮组件

生成elementUI组件的引用案例

使用自定义组件可以提高表单的灵活性,也可以实现功能更复杂的表单。

实施原则

表单创建组件的呈现/更新机制图

利用form-craete动态绘制表单的机制图

以上是如何使用form-create生成表单生成、动态渲染和自定义组件的描述和演示,以及form-create项目的生成原理和内部结构。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:Vue数据驱动表单渲染 轻松获取表单表单是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。