Cascader 级联选择

在线实验室

Cascader 级联选择 - 图1

Cascader 级联选择 - 图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元素的属性null | object否

示例预览

表单展示状态

表单编辑状态

示例代码

  1. cascader: {
  2.     type: 'cascader',
  3.     label: '级联选择',
  4.     props: {
  5.         options: [
  6.             {
  7.                 value: 'zhinan',
  8.                 label: '指南',
  9.                 children: [
  10.                     {
  11.                         value: 'shejiyuanze',
  12.                         label: '设计原则',
  13.                         children: [
  14.                             {
  15.                                 value: 'yizhi',
  16.                                 label: '一致'
  17.                             },
  18.                             {
  19.                                 value: 'fankui',
  20.                                 label: '反馈'
  21.                             },
  22.                             {
  23.                                 value: 'xiaolv',
  24.                                 label: '效率'
  25.                             },
  26.                             {
  27.                                 value: 'kekong',
  28.                                 label: '可控'
  29.                             }
  30.                         ]
  31.                     },
  32.                     {
  33.                         value: 'daohang',
  34.                         label: '导航',
  35.                         children: [
  36.                             {
  37.                                 value: 'cexiangdaohang',
  38.                                 label: '侧向导航'
  39.                             },
  40.                             {
  41.                                 value: 'dingbudaohang',
  42.                                 label: '顶部导航'
  43.                             }
  44.                         ]
  45.                     }
  46.                 ]
  47.             }
  48.         ]
  49.     }
  50. }