表单设计器

表单是所有管理系统都包含的组件，其复杂程度往往和功能设计，数据表设计的复杂度息息相关，但其基础底层实则总结以下四点：

1. 表单的布局: 涉及表单的多个字段的排列，大小，分组关系；
2. 字段组件选取：不同类型的字段对应的组件应该不同，一样类型的字段在不同场景下使用的组件也会不同。
3. 数据校验：对表单值进行规范设定，对值与规则匹配度进行验证提醒。完成对数据质量的把关工作。
4. 字段之间的联动：单个字段组件的值或者属性发生变化时会对其他组件的值或者属性的影响。

基于以上分析，vlife 很好的适配解决了这些场景需求，设计出一款没有纷繁复杂的拖拽，没有羞涩难懂的脚本的表单设计器。它将后端的模型与前端的组件充分融合在一起， 也许不炫酷，但简单好用。各种复杂的表单创建，等你来用 vlife 的表单设计器来解锁。

1. 快速初始化

表单设计器里没有字段的设计功能，没有组件的拖拽。由于设计器已经对系统的表单DTO模型，查询REQ模型进行分析后完成了初始化布局工作，vlife 里是先设计模型后自动产生表单。研发后面就按照实际业务需求来进行表单配置即可。可配置的内容包含表单布局，控件选择，控件样式,UI 属性、校验规则、以及字段之间的“事件响应”。

2. 所见即所得

表单展示内容就是真实应用场景的效果，极大方便设计表单时进行调试，所有属性设置完成后，表单都能实时渲染。

3. 复杂表单轻松搞定

对于常见复杂表单需求，如支持多种布局样式，字段各种复杂校验、字段之间的联动依赖关系在 vlife 的表单设计器里都已实现了。研发人员就像给“芭比娃娃” 选择合适场景的衣服配饰一样来设计表单。通过对每个字段选择合适场景的组件、布局、属性、联动关系就可以完成一整张复杂表单。

3.1 单个字段控件设计

3.2 事件响应

当一个字段的值发生变化时，会对其他字段的展示效果发生影响，在 vlife 里将这类工作定义在“事件响应”里进行完成，你仅需通过选择事件字段的某个属性发生什么变化，响应的字段会发生什么变化。像完成造句一样的方式则可以轻松设置整张表的事件响应

开源地址：https://github.com/wwwlike/vlife

视频讲解