动态表单是什么?如何开发?

在开发表单时常见的有两种做法:一种是通过配置代码的方式,而另一种则是通过组件组合的方式。通过配置代码生成的表单,我们称之为动态表单(Dynamic Form),而通过组件组合生成的表单,我们称之为普通表单。 ​

对于动态表单来说,我们只需要定义一套统一的配置模板,之后新增表单或者输入项时,只需要修改配置文件即可,十分简单便捷。与组合的方式相比也少了许多重复的 HTML 模板代码。

生成动态表单的配置代码(一般就是一个大json),一般来说会存储在后端,并通过 API 提供给前端使用。也可以将配置代码存储在前端

小结

说了这么多,最后让我们再来总结一下动态表单的适用场景以及选择动态表单应该考虑的问题:

  1. 动态表单适合拥有大量相似表单需求的场景:输入控件的类型比较固定,UI 和布局相对统一。这样方便定义 Schema,并通过简单循环直接生成表单
  2. 选择动态表单不应该只从技术角度去决策,还需要考虑业务需求和 UI 设计。不要只为了几行重复的 HTML 代码就选择动态表单方案,要知道有些重复是「必要的」,错误选择动态表单方案反而会降低你的开发效率
  3. 一旦敲定了动态表单方案,灵活性方面就应该做出一些妥协,不再接受千变万化的 UI 设计。这一点要开发、业务、设计多个角色沟通配合
  4. 不要通过配置文件配置特别细节的 CSS 样式。你可以封装一些固定的样式,比如两列布局/三列布局,然后通过配置项去切换。

参考

动态表单(1)—— 别再滥用动态表单了

【vue系列】优雅地用 vue 生成动态表单(一)

 

 

posted @ 2024-03-07 17:21  坤嬷嬷  阅读(30)  评论(0编辑  收藏  举报