AntdSchemaForm 配置项表单

简述

• 基于 Ant Design Vue Form 组件封装。
• 使用配置项 schema 参数可自动生成 输入控件 和 formItem，并绑定数据域，无需书写过多HTML。
• 支持 配置自定义组件 与 自定义组件校验，并且支持 Form 组件所有 API。
• 支持以 [schema.name/schema.key]-[slotName] 的方式进行配置组件 插槽穿透。

表单

除 Ant Design Vue Form 提供的三种排列方式以外，新增 filter 排列：

• 样式等同于 行内排列。
• 使用 filter 排列时，会自动生成 operating 区域，包含 展开/收起 重置 查询 三个按钮。
• 表单会根据页面尺寸动态折叠隐藏，默认只显示两行，可通过 expandRowsCount props参数调整显示行数。
• operating 区域支持插槽进行自定义。

API

Props

• 支持 Ant Design Vue Form 组件所有 props。
• 修改 layout 参数，增加模式 filter。

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------------ | -------------------------------------------------- | ------------ | | schema | 表单构造的配置描述，具体项见下表。 | array | [] | | state(v-model) | 表单数据对象，初始可设置为空对象，会自动根据 schema 中的 name 生成对应数据。 | object[] | [{}] | | expandRowsCount | 折叠时显示的最小行数。 | number | 2 | | layout | 表单布局 | 'horizontal' | 'vertical' | 'inline' | 'filter' | 'horizontal' | | itemStyle | item 的通用样式，filter 模式下默认值为 {margin: '8px 10px', width: '275px'} | CSSProperties | {} | | itemClassPrefix | item 的类名前缀，每个 item 会自动添加一个 [itemClassPrefix]-[schema.name/schema.key] 结构的类名。 | string | 'aof' |

schema

生成表单的构造数据对象，分为3个部分：

• schema 参数
• Ant Design Vue Form.Item 组件支持的所有参数
• schema 中使用的组件