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 下的插槽 |