WetSchemaForm JSON 表单

基本介绍

WetSchemaForm 是根据 JSON Schema 来生成表单的工具。WetSchemaForm 会根据 valueType 来映射成不同的表单项

引入方法: import { WetSchemaForm } from '@wetspace/pro-components';

基本使用

Schema 定义

这里采用的是ts描述

export type WetValueType = 
'text' | 'date' | 'checkbox' | 'radio' | 'switch' | 'slider' | 'rate'|
'select' | 'tree-select' | 'number' | 'autocomplete' | 'color' | 'cascader' |
 'time-picker' | 'time-select' | 'array'
export type WetSchemaItemType = {
    valueType?: WetValueType,
    property: string | string[],
    properties?:WetSchemaItemType[]
    title?: string,
    valueEnum?: WetFormOption[],
    hideInForm?: boolean,
    renderFormItem?: VNode | Component,
    formInputProps?: Record<string, any>,
    dependency?: any,

} & Partial<WetProFormItemProps>

export const wetProFormItemProps = buildProps({
    ...colProps,
    ...formItemProps,
    rules: {
        type: definePropType<FormItemRule[]>(Array),
        default() {
            return []
        }
    },
    span: {
        type: Number,
    },
    noStyle: Boolean,
    description: String,
    labelColor: String,
})

export type WetProFormItemProps = ExtractPropTypes<typeof wetProFormItemProps>

表单联动

注册新的自定义表单项

属性

通用属性(未在属性表里面例出来的)请参考WetProForm的配置

属性	描述	类型	默许值
properties	Schema配置	WetSchemaItemType[]	-

实例方法

参考WetProForm配置

插槽

参考WetProForm配置