Polo

FormMaking --基于 vue 和 element-ui 实现的表单设计器,可以让表单开发简单而高效

4/21/2021 FormMakingelement-uivue



# 基本情况


基于 vue (opens new window) 和 element-ui (opens new window) 实现的表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，可以让表单开发简单而高效。

# 组件

# 特性

  • 可视化配置页面
  • 提供栅格布局，并采用flex实现对齐
  • 一键预览配置的效果
  • 一键生成配置json数据
  • 一键生成代码，立即可运行
  • 提供自定义组件满足用户自定义需求
  • 提供远端数据接口，方便用户需要异步获取数据加载
  • 提供功能强大的高级组件
  • 支持表单验证
  • 快速获取表单数据
  • 国际化支持

# 优点

  • 快速构建表单，提供栅格布局；
  • 减少重复作业，高效完成表单和json双向转化；
  • 对于个性化定制，可以添加自定义class覆盖原来的样式，满足业务的实际需求；
  • 支持Element-ui和Ant Design-ui；
  • 提供多种api接口，对数据和字段进行操作；

# 缺点

  • 高级组件数量不够多；原生antd of vue 中包含57个组件，还有很多高级组件，类似card，list等等未完成；
  • 对于中台应用来说，Table，Card，Search等经常使用的组件暂时没有，等后续更新；

# 应用场景


Element-UI版本（实际使用图）

  • 表单生成器（ GenerateForm）




https://www.v2ex.com/t/642079 (opens new window)

  • 表单设计器 （MakingForm）




Antd版本（使用vue cli3实现）


# PS

  1. antd组件版本暂时只在高级版本才有；产品正在进一步兼容antd的高级组件，提升容量；
  2. 通过跟Ant Design Pro配合Element-ui搭配完美，Antd组件兼容性待测量；
  3. 建议搭配第三方组件使用：