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

表单-创建

具有动态渲染、数据采集、验证和提交功能的表单生成器支持双向数据绑定、事件扩展和自定义组件，可快速生成省市三级联动、时间选择和日期选择等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项目的生成原理和内部结构。

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