大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

vue antd 基于json schema 的动态表单实现 一: schema介绍

介绍

本篇文章主要介绍基于json schema 实现 vue antd 的动态表单中的基础部分:schema。
先了解两个结构:json schema 和 ui schema。
表单主要是包括三个部分:数据结构、数据、展示结构。

  • 数据结构:使用json schema,数据验证规则包含在json schema中
  • 数据:就是json data
  • 展示结构:主要包括使用组件类型(input textarea select)以及布局(grid等)

源码
vue-alain


json schema

Json schema 本身就是json对象,例如

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "title": "Person",
  "type": "object",
  "required": [
    "FirstName",
    "LastName"
  ],
  "properties": {
    "FirstName": {
      "type": "string"
    },
    "MiddleName": {
      "type": [
        "null",
        "string"
      ]
    },
    "LastName": {
      "type": "string"
    },
    "Gender": {
      "oneOf": [
        {
          "$ref": "#/definitions/Gender"
        }
      ]
    },
    "NumberWithRange": {
      "type": "integer",
      "format": "int32",
      "maximum": 5.0,
      "minimum": 2.0
    },
    "Birthday": {
      "type": "string",
      "format": "date-time"
    },
    "Company": {
      "oneOf": [
        {
          "$ref": "#/definitions/Company"
        },
        {
          "type": "null"
        }
      ]
    },
    "Cars": {
      "type": [
        "array",
        "null"
      ],
      "items": {
        "$ref": "#/definitions/Car"
      }
    }
  },
  "definitions": {
    "Gender": {
      "type": "integer",
      "description": "",
      "x-enumNames": [
        "Male",
        "Female"
      ],
      "enum": [
        0,
        1
      ]
    },
    "Company": {
      "type": "object",
      "additionalProperties": false,
      "properties": {
        "Name": {
          "type": [
            "null",
            "string"
          ]
        }
      }
    },
    "Car": {
      "type": "object",
      "additionalProperties": false,
      "properties": {
        "Name": {
          "type": [
            "null",
            "string"
          ]
        },
        "Manufacturer": {
          "oneOf": [
            {
              "$ref": "#/definitions/Company"
            },
            {
              "type": "null"
            }
          ]
        }
      }
    }
  }
}

json schema 对象的跟主要包括以下属性

key 描述 其他说明
$schema jsonschema 关键字状态
title 描述 标题
required 必须属性
properties 属性定义 properties每一项也是一个json schema对象
definitions 应用定义
type json schem类型
enum 枚举类型数据源

json schema 类型(type指定)主要包括以下几种类型

  • object
  • array
  • string
  • integer
  • number
  • boolean

object

object 有三个关键信息

  • type 限定json schema 类型
  • properties object属性定义
  • required 必须属性,可以为空

属性说明

key 描述 其他说明
type 对象类型
properties 属性定义
required 必须属性
maxProperties 最多属性数量
minProperties 最少属性数量
additionalProperties true or false

array

array 有几个单独的属性

items
minItems
maxItems
uniqueItems

属性说明

key 描述 其他说明
items 对象类型
minItems 属性定义
maxItems 必须属性
uniqueItems 最多属性数量
additionalProperties true or false

string

属性说明

key 描述 其他说明
maxLength 最大长度
minLength 最小长度
pattern 正则验证

integer

属性说明

key 描述 其他说明
minimum 最小数值
exclusiveMinimum
maximum 正则最大数值
exclusiveMaximum
multipleOf 某个数的倍数

number

属性说明

key 描述 其他说明
minimum 最小数值
exclusiveMinimum
maximum 正则最大数值
exclusiveMaximum

boolean

true or false


ui schema

Json Schema 是描述数据结构和验证信息,即数据类型以及数据属性,并没有规定要如何展示数据。
定义 Ui schema 的目标是为了结合json schema ,定义 json 数据的属性使用何种组件进行展示。
在定义 ui schema 之前,需要了解form结构和属性


image.png

在 antd vue 中,一个表单项主要有两个部分:

  • a-form-item
  • a-input(或者其他组件)

一个ui schema 对象,应该要包括这两个内容的属性,定义uischema 对象代码如下

{
    /**
     * 小部件名称
     */
    widget?: string;

    /**
     * 元素组件大小
     */
    size?: 'default' | 'large' | 'small';

    /**
     * <form-item>属性
     */
    itemattrs?: any;

    /**
     * 组件属性
     */
    widgetattrs?: any;

}

  • itemattrs 主要是 a-form-item 标签的属性对象,比如 wrapperCol labelCol
  • widgetarrs 主要是控件标签的属性对象 比如 min max
  • widget: 主要是使用组件的名称,可以为空,如果为空,则应当指定 json schema 中的默认类型应该使用组件

例如 schema定义如下

{
      required: ['name'],
      properties: {
        name: {
          type: 'string',
          title: '姓名',
          ui: {
            errors: {
              required: '姓名为必填项',
            },
          },
        },
      },

    }

则 展示的表单如下所示


image.png

参考资料

ng-alain-form
json shcema
antd-vue


我的公众号

1397128-6f43290a972117a1.jpg