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';

    /**
     * 属性
     */
    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