VSchemaForm 是什么

背景

表单问题，不管是在 jQuery 时代，还是 Vue/React 时代，都永远是前端工程师们的痛，但是这又是没办法的事情，业务需求多种多样，对于中后台业务而言，表单页面和报表页面基本上是中后台业务的核心展现形式，但是，如何帮助开发者更高效的开发表单，目前传统的表单开发方式：

手动管理表单状态
手动收集表单数据
手动管理表单校验状态

存在哪些问题？

表单状态管理变得越来越难以维护，需要引入状态管理库
传统表单开发的数据结构往往都是扁平结构，没法很好的处理嵌套复杂数据的情况，如果要处理，工作量会非常大
当业务有动态输出表单的需求的时候，不得不自己开发一个基于某种数据协议的动态输出表单的组件
当业务需要在可视化界面配置产出表单时，需要自己开发一个基于json的动态输出表单组件

方案

基于以上问题的探索，以及受到UForm的启发，研发了VSchemaForm的Vue表单解决方案：

使用json描述表单内容
支持多平台（移动端和桌面端）
支持多个组件库（Element UI、Ant Design Vue、Antd Mobile Vue, Vant）
支持嵌套表单
支持任意数据的数组解构
支持副作用函数，统一处理表单内各项的数据联动
支持解构数据，减少自定义的数据转换
支持表单校验（使用async-validator，并内置了常用的邮箱、电话号码、ip地址、身份证号、url等数据格式的校验）
支持扩展自定义的组件的作为输入组件，详情组件，布局组件等
支持表单项前面添加序号

支持复杂的布局

可以支持无限制层次的嵌套对象
支持对象数组
支持自定义的布局
内置了栅格、卡片、文本串联、分步等布局

一个示例

const schema = {
  expandSelect: {
    title: '展开单选',
    required: true,
    type: 'expand-select',
    props: {options}
  },
  select: {
    title: '单选',
    required: true,
    type: 'select',
    props: {options, clearable: true}
  },
  multiSelect: {
    title: '多选',
    required: true,
    type: 'select',
    array: true,
    props: {options}
  },
  expandMultiSelect: {
    title: '展开多选',
    required: true,
    type: 'expand-select',
    array: true,
    props: {options}
  },
  text: {
    title: '多行文本',
    required: true,
    type: 'text'
  },
  zh: {
    title: '仅限中文',
    required: true,
    type: 'text',
    format: 'zh',
    default: 'not chinese'
  },
  string: {
    title: '单行文本',
    type: 'string',
    required: true,
    placeholder: '请输入文本'
  },
  url: {
    title: '链接',
    rules: 'url',
    type: 'url'
  },
  integer: {
    title: '整数',
    type: 'integer',
    required: true,
    min: 100,
    max: 200
  },
  double: {
    title: '小数',
    required: true,
    type: 'double'
  }
}

更多内容查看文档示例以及源码，这里就不多说了

vue3表单解决方案v-schema-form

VSchemaForm 是什么

背景

方案

支持复杂的布局

一个示例