sluggard-antdv

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 中使用的组件