动态表单设计

268 阅读2分钟

为什么需要动态表单

项目中表单需求较多的时候,为了提升代码整洁度,提高代码可复用性,此时可以通过动态表单的形式处理项目需求。项目中原使用 动态表单 开源组件实现相关需求的处理

当前form-create组件存在的问题

  • form-create内组件库为iview,element,无法支持自己的UI组件库
  • 用户体验较差,只能固定展示静态组件,无法满足联动,模糊查询等
  • 业务场景较为简单,无法满足项目部分业务场景,不利于修改维护

新的组件需要满足哪些功能

  • 支持 input,select,select(模糊查询),单选,多选,添加通知人(业务组件)
  • 支持select关联查询方法,动态获取
  • 支持自定义组件混入,对于特殊业务场景可直接定制化开发

后续如何迭代

  • 项目:通过动态表单的方式,给用户提供可配置界面用户可根据自己的需求进行表单的配置(需要一定开发时间),近期内实现,前端自行组装数据,由服务端储存并返回
  • 代码:通过render函数的形式,进行代码优化,干掉大部分v-if
  • 最终:通过类似form-create实现方式,创建一款可复用的动态表单(实现周期较长,持续优化)

自定义表单改造

  • 为用户提供可配置界面,通过拖拽等配置实现对于相应字段的UI及业务模式的描述,并通过动态表单loder渲染
  • 支持手动编辑配置与json直接导入

如何能实现一个动态表单

  1. 简单的动态表单实现 = 数据源配置(自定义表单生成组件配置) + 渲染引擎解析(动态表单/dy - form)。

  2. 基础信息配置:组件的样式,文本,校验规则,信息提示,info/helper 信息,mtd 组件props等,select是否多选,模糊查询等

  3. 扩展信息

    1. 接口请求:select,radio,以及部分扩展组件展示信息需要服务端获取
    2. events(select举例):change事件,visible-change(下拉框触发),remove-tag(多选模式下,删除tag)等等等