Checkbox 多选框

在线实验室

Checkbox 多选框 - 图1

Checkbox 多选框 - 图2

参数列表

参数说明可选值 | 类型必填
typefield类型string
label标签文本string
ctx编辑态为edit,展示态为view,不配置则使用当前block的ctx"edit" | "view"
default可以设置默认值string
labelWidth在form和object内生效,可单独指定当前field的标签文本所占的宽度string
info如配置会在标签处展示tooltip提示string
desc如配置会在ctx为edit状态下固定显示在表单项下面string
hidden默认为false,配置为true则改表单项会隐藏null | boolean
show配置后只有满足指定的条件后才显示,实现对目标条件的依赖联动string | object | function
show.name目标字段名string
show.value目标字段值string | number
rules可以配置多条校验规则,会在form的编辑态通过@validate来校验,详见 https://github.com/yiminghe/async-validatornull | array
rules[]object
rules[].require是否必填boolean
rules[].type校验类型"string" | "number" | "boolean" | "method" | "regexp" | "integer" | "float" | "array" | "object" | "enum" | "date" | "url" | "hex" | "email"
props会透传至底层的element-ui组件作为props属性,或者是原生dom元素的属性object | object
collapseLimit可以设置在view状态下,如果超出一定数量可以折叠,不配置或0为不折叠number
useStringValue默认为true,会自动转换多选options内的value为string,如设置为false不转换(需要重置set和get配合)null | boolean

示例预览

表单展示状态

表单编辑状态

示例代码

  1. checkbox: {
  2. type: 'checkbox',
  3. label: '多选',
  4. props: {
  5. options: {
  6. a: '黄金糕',
  7. b: '双皮奶',
  8. c: '蚵仔煎',
  9. d: '龙须面',
  10. e: '北京烤鸭'
  11. }
  12. }
  13. }

组件更多配置可参考Element:Checkbox 多选框Checkbox 多选框 - 图3中的Input Attributes