Element Schema Form

# 数据字段 prop

prop 是辨别当前组件的唯一字段，既是 model 和 options 的键值 key，又是el-form 使用 validate、resetFields 方法的必填字段，所以需保证 prop的 唯一性

# 组件类型 type

SchemaForm 的组件是基于 Element 进行封装，目标是完美兼容原组件的所有属性

# 内置类型

类型 含义 属性参考
input 输入框 el-input
select 选择器 el-select
radio 单选框组 el-radio-group
checkbox 多选框组 el-checkbox-group
cascader 级联选择器 el-cascader
switch 开关 el-switch
slider 滑块 el-slider
datepicker 日期选择器 el-date-picker
timeselect 固定时间 el-time-select
timepicker 任意时间 el-time-picker
colorpicker 颜色选择器 el-color-picker
progress 进度条 el-progress
rate 评分 el-rate

# 表单属性 formItem

兼容所有el-form-item的属性,以下内容为常用属性

参数 说明 类型 可选值 默认值
label 标签文本 string — —
label-width 表单域标签的的宽度，例如 '50px'。支持 auto string — —
show-message 是否显示校验错误信息 boolean — true
inline-message 以行内形式展示校验信息 boolean — false
size 用于控制该表单域下组件的尺寸 string medium / small / mini -

# 绑定值修饰符 modifier

为了更好的支持数值绑定，增加了v-model的修饰符，现支持

参数 说明
number 自动将用户的输入值转为数值类型
trim 自动过滤用户输入的首尾空白字符

# 属性绑定 attrs

支持Element组件的属性，以el-input为例,具体参数 可参考 Element

 {
   type: 'input',
   prop: 'name',
   attrs: { type: 'textarea' }
 }

# 动态属性绑定 dynamicAttrs

除了绑定的静态属性外，还支持动态属性的绑定，例如用于与其它操作联动

 {
   type: 'input',
   prop: 'name',
   dynamicAttrs: { disabled: !!this.model.id }
 }

# 事件绑定 on

支持Element组件的事件，以el-input为例,具体参数 可参考 Element

 {
   type: 'input',
   prop: 'name',
   on: { focus: this.onNameFocus }
 }

# 事件 & 按键修饰符

对于 .passive、.capture 和 .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on

修饰符 前缀
.passive &
.capture !
.once ~
.capture.once 或 .once.capture ~!
on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

on: {
  keyup: function (event) {
    // .self 等价于 如果触发事件的元素不是事件绑定的元素则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是 enter 键或者
    // 没有同时按下 shift 键
    // 则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    event.preventDefault()
    // ...
  }
}

# 插槽 slot

参数 说明
slot 自定义完整组件
labelSlot 用于 el-form-item 中的 label插槽
frontSlot 定义element 组件前的插槽
rearSlot 定义element 组件后的插槽

← layout 布局 →