Cascader 多级联动

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

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

:::

在线预览

Maker

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

JSON

  1. {
  2.     type:"cascader",
  3.     title:"所在区域",
  4.     field:"address",
  5.     value:['陕西省','西安市','新城区'],
  6.     props:{
  7.         data:[{
  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. }

参考:iview2.x | iview3.x

value: Array

props

属性 说明 类型 默认值
data 可选项的数据源，格式参照示例说明 Array []
render-format 选择后展示的函数，用于自定义显示格式 Function label => label.join(‘ / ‘)
disabled 是否禁用选择器 Boolean false
clearable 是否支持清除 Boolean true
placeholder 输入框占位符 String 请选择
trigger 次级菜单展开方式，可选值为 click 或 hover String click
change-on-select 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例 Boolean false
size 输入框大小，可选值为large和small或者不填 String -
load-data 动态获取数据，数据源需标识 loading Function -
filterable 是否支持搜索 Boolean false
not-found-text 当搜索列表为空时显示的内容 String 无匹配数据
transfer 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 Boolean false
element-id 给表单元素设置 id，详见 Form 用法。 String -

on 事件

事件名 说明 返回值
on-change 选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据 value, selectedData
on-visible-change 展开和关闭弹窗时触发 显示状态，Boolean