Cascader 多级联动

::: tip 省市区联动json数据

https://github.com/xaboy/form-create/tree/master/district

:::

Maker

  1. $formCreate.maker.cascader('所在区域','address',['陕西省','西安市','新城区']).props({
  2.     options:window.province
  3. })

JSON

  1. {
  2.     type:"cascader",
  3.     title:"所在区域",
  4.     field:"address",
  5.     value:['陕西省','西安市','新城区'],
  6.     props:{
  7.         options:[{
  8.             value: 'beijing',
  9.             label: '北京',
  10.             children: [
  11.                 {
  12.                     value: 'gugong',
  13.                     label: '故宫'
  14.                 },
  15.                 {
  16.                     value: 'tiantan',
  17.                     label: '天坛'
  18.                 },
  19.                 {
  20.                     value: 'wangfujing',
  21.                     label: '王府井'
  22.                 }
  23.             ]
  24.         }, {
  25.             value: 'jiangsu',
  26.             label: '江苏',
  27.             children: [
  28.                 {
  29.                     value: 'nanjing',
  30.                     label: '南京',
  31.                     children: [
  32.                         {
  33.                             value: 'fuzimiao',
  34.                             label: '夫子庙',
  35.                         }
  36.                     ]
  37.                 },
  38.                 {
  39.                     value: 'suzhou',
  40.                     label: '苏州',
  41.                     children: [
  42.                         {
  43.                             value: 'zhuozhengyuan',
  44.                             label: '拙政园',
  45.                         },
  46.                         {
  47.                             value: 'shizilin',
  48.                             label: '狮子林',
  49.                         }
  50.                     ]
  51.                 }
  52.             ]
  53.         }]
  54.     }
  55. }

参考:Element_Cascader

value :Array

props

参数 说明 类型 可选值 默认值
options 可选项数据源，键名可通过 props 属性配置 array — —
props 配置选项，具体见下表 object — —
separator 选项分隔符 string — 斜杠’/‘
popperClass 自定义浮层类名 string — —
placeholder 输入框占位文本 string — 请选择
disabled 是否禁用 boolean — false
clearable 是否支持清空选项 boolean — false
expandTrigger 次级菜单的展开方式 string click / hover click
showAllLevels 输入框中是否显示选中值的完整路径 boolean — true
filterable 是否可搜索选项 boolean — —
debounce 搜索关键词输入的去抖延迟，毫秒 number — 300
changeOnSelect 是否允许选择任意一级的选项 boolean — false
size 尺寸 string medium / small / mini —
beforeFilter 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 function(value) — —

props.props

参数 说明 类型 可选值 默认值
value 指定选项的值为选项对象的某个属性值 string — —
label 指定选项标签为选项对象的某个属性值 string — —
children 指定选项的子选项为选项对象的某个属性值 string — —
disabled 指定选项的禁用为选项对象的某个属性值 string — —

on 事件

事件名称 说明 回调参数
change 当绑定值变化时触发的事件 当前值
active-item-change 当父级选项变化时触发的事件，仅在 change-on-select 为 false 时可用 各父级选项组成的数组
blur 在 Cascader 失去焦点时触发 (event: Event)
focus 在 Cascader 获得焦点时触发 (event: Event)
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false