SchemaForm - JSON表单

能够根据 JSON Schema 来配置成各类表单的组件。

基本用法

通过 JSON数据 渲染表单

表单项及插槽

表单项可以通过JSX、渲染函数、插槽等形式自定义

隐藏表单项

可以将表单项隐藏，适用于需要动态控制的场景

表单项参数

可以配置组件的参数

Row/Col 布局

配置一行多列的表单

API

属性

在各种表单组件的基础上增加了以下 API

属性	说明	类型	默认值
v-model	双向绑定对象	object	{}
columns	描述对象	ProSchema[]	[]
layoutType	表单组件类型，例如 QueryFilter，ProForm 等	string	'ProForm'
readonly	是否只读	boolean	false
(...)	各类表单组件的参数		-

layoutType 可选值

属性	说明
ProForm	基本表单类型，默认值
QueryFilter	查询表单，配置之后支持 QueryFilter 的所有配置
Embed	内嵌模式，只生成表单项，不生成 Form 可以混合使用

插槽

名称	说明	类型
formItem	自定义表单项	{ record: any, column: ProSchema }

类型声明

type RenderFn = (arg: ProSchema & Recordable) => JSX.Element | VNodeTypes
type BooleanFn = () => boolean

export interface ProSchema {
  /** 确定这个列的唯一值 */
  key?: string | number
  /** 支持一个数组，[a,b] 会转化为 obj.a.b，与实体映射的key */
  dataIndex?: string | number | (string | number)[]
  /** 选择如何渲染相应的模式 */
  valueType?: VNodeTypes | any

  /** 标题 */
  title?: string | RenderFn

  /** 自定义只读模式 */
  render?: RenderFn

  /** 自定义编辑模式 */
  renderFormItem?: RenderFn

  /** 传递给 渲染组件 的参数 */
  fieldProps?: any
  /** 传递给 FormItem 的参数 */
  formItemProps?: any

  /** 在 Form 中隐藏 */
  hideInForm?: boolean | BooleanFn
  /** 在 Table 中隐藏 */
  hideInTable?: boolean | BooleanFn
  /** 在 Table 的查询表单中隐藏 */
  hideInSearch?: boolean | BooleanFn

  /**
   * 每个表单占据的格子大小
   *
   * @param 总宽度 = span* colSize
   * @param 默认为 1
   */
  colSize?: number
  /** 表单开启 `grid` 时的 `col`参数 */
  colProps?: any

  /**
   * 组件双向绑定的属性
   * @default 'modelValue'
   */
  bind?: string
}