SchemaForm
此组件基于JsonSchema逻辑来使用的
基础用法
表单校验
SchemaUi 属性
- 可通过
schema-ui属性来控制表单项的相关 UI 操作 - 可通过
schema-ui中的options属性来自行设置对应原始组件中的属性 - 可通过
columns属性来控制表单项的列布局
事件相关
- 可通过
@data-change事件来监控表单项中的值变更
插槽
SchemaForm API
SchemaForm Attributes
此组件支持所有el-form中的属性,详细属性可查看
| 名称 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| schema | 表单项描述 | Object | — | 是 |
| modelValue(v-model) | 表单项值 | Object | — | 是 |
| ui-schema | 表单项 UI 相关描述 | Object | — | 否 |
| rules | 表单项验证规则 | Object | — | 否 |
| columns | 表单项的列数 | Number | 3 | 否 |
SchemaForm Events
| 名称 | 说明 | 类型 |
|---|---|---|
| data-change | 表单项数据值变更触发 | Function |
SchemaForm Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| validate | 对整个表单的内容进行验证。 接收一个回调函数,或返回 Promise。 | Function |
| validateField | 验证具体的某个字段。 | Function |
| resetFields | 重置该表单项,将其值重置为初始值,并移除校验结果 | Function |
| scrollToField | 滚动到指定的字段 | Function |
| clearValidate | 清理某个字段的表单验证信息。 | Function |
SchemaForm Slots
| 插槽名 | 说明 |
|---|---|
| [字段名] | 对应表单项自定义插槽 |
| row | 对应 ElRow 下的插槽 |
Setaria Components