# Cascader 级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

# 属性对比（只显示有差异的）

参数	WinDesign	Element-ui
size	可选值： large / medium / small / mini	可选值： medium / small / mini

# 代码演示

级联面板

和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能。

查看代码

<template>
  <w-cascader-panel :options="options"></w-cascader-panel>
</template>

<script>
  export default {
    components: {
    },

    data() {
      return {
        options: [
          {
            value: '1',
            label: '安徽',
            children: [
              {
                value: '1-1',
                label: '安徽医科大学附属医院',
                children: [
                  {
                    value: '1-1-1',
                    label: '肿瘤科'
                  },
                  {
                    value: '1-1-2',
                    label: '口腔科'
                  },
                  {
                    value: '1-1-3',
                    label: '内科'
                  },
                  {
                    value: '1-1-4',
                    label: '外科'
                  }
                ]
              },
              {
                value: '2-1',
                label: '省立医院',
                children: [
                  {
                    value: '2-1-1',
                    label: '肿瘤科'
                  },
                  {
                    value: '2-1-2',
                    label: '口腔科'
                  },
                  {
                    value: '2-1-3',
                    label: '内科'
                  },
                  {
                    value: '2-1-4',
                    label: '外科'
                  }
                ]
              }
            ]
          },
          {
            value: '2',
            label: '上海',
            children: [
              {
                value: '2-1',
                label: '上海大华医院',
                children: [
                  {
                    value: '2-1-1',
                    label: '肿瘤科'
                  },
                  {
                    value: '2-1-2',
                    label: '口腔科'
                  },
                  {
                    value: '2-1-3',
                    label: '内科'
                  },
                  {
                    value: '2-1-4',
                    label: '外科'
                  }
                ]
              },
              {
                value: '2-2',
                label: '上海龙华医院',
                children: [
                  {
                    value: '2-2-1',
                    label: '肿瘤科'
                  },
                  {
                    value: '2-2-2',
                    label: '口腔科'
                  },
                  {
                    value: '2-2-3',
                    label: '内科'
                  },
                  {
                    value: '2-2-4',
                    label: '外科'
                  }
                ]
              }
            ]
          }
        ],
      }
    }
  }
</script>

# API

# Cascader Attributes

参数	说明	类型	可选值	默认值	Version
value / v-model	选中项绑定值	Array	—	—
options	可选项数据源，键名可通过 `props` 属性配置	Array	—	—
props	配置选项，具体见下表	Object	—	—	v1.6.5 有改动
size	尺寸	String	'large' \| 'medium' \| 'small' \| 'mini'	'medium'
placeholder	输入框占位文本	String	—	请选择
disabled	是否禁用	Boolean	—	false
clearable	是否支持清空选项	Boolean	—	false
show-all-levels	输入框中是否显示选中值的完整路径	Boolean	—	true
collapse-tags	多选时是否将选中值按文字的形式展示	Boolean	—	false	v1.4.6
separator	选项分隔符	String	—	'/'
filterable	是否可搜索选项	Boolean	—	—
filter-method	自定义搜索逻辑，第一个参数是节点`node`，第二个参数是搜索关键词`keyword`，通过返回布尔值表示是否命中	Function(node, keyword)	—	—	v1.6.4
debounce	搜索关键词输入的去抖延迟，毫秒	Number	—	300
before-filter	筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选	Function(value)	—	—
popper-class	自定义浮层类名	String	—	—

# Cascader Events

事件名称	说明	回调参数	Version
change	当选中节点变化时触发	选中节点的值
expand-change	当展开节点发生变化时触发	各父级选项值组成的数组	v1.6.5
blur	当失去焦点时触发	(event: Event)
focus	当获得焦点时触发	(event: Event)
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
remove-tag	在多选模式下，移除 Tag 时触发	移除的 Tag 对应的节点的值	v1.6.5

# Cascader Methods

方法名	说明	参数	Version
getCheckedNodes	获取选中的节点	(leafOnly) 是否只是叶子节点，默认值为 `false`	v1.6.5

# Cascader Slots

名称	说明	Version
—	自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据
empty	无匹配选项时的内容	v1.6.5

# CascaderPanel Attributes

参数	说明	类型	可选值	默认值
value / v-model	选中项绑定值	—	—	—
options	可选项数据源，键名可通过 `Props` 属性配置	Array	—	—
props	配置选项，具体见下表	Object	—	—

# CascaderPanel Events

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的值
expand-change	当展开节点发生变化时触发	各父级选项值组成的数组

# CascaderPanel Methods

方法名	说明	参数
getCheckedNodes	获取选中的节点数组	(leafOnly) 是否只是叶子节点，默认值为 `false`
clearCheckedNodes	清空选中的节点	—

# CascaderPanel Slots

名称	说明
—	自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据

# Props

参数	说明	类型	可选值	默认值	Version
expandTrigger	次级菜单的展开方式	String	'click' \| 'hover'	'click'	v1.6.5
multiple	是否多选	Boolean	—	false	v1.6.5
checkStrictly	是否严格的遵守父子节点不互相关联	Boolean	—	false	v1.6.5
checkStrictlyLastClick	父子节点不互相关联时在叶子结点开启整个选中	Boolean	—	false	v2.4.1
emitPath	在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值	Boolean	—	true	v1.6.5
lazy	是否动态加载子节点，需与 lazyLoad 方法结合使用	Boolean	—	false	v1.6.5
lazyLoad	加载动态数据的方法，仅在 lazy 为 true 时有效	Function(node, resolve)，`node`为当前点击的节点，`resolve`为数据加载完成的回调(必须调用)	—	—	v1.6.5
value	指定选项的值为选项对象的某个属性值	String	—	'value'
label	指定选项标签为选项对象的某个属性值	String	—	'label'
children	指定选项的子选项为选项对象的某个属性值	String	—	'children'
disabled	指定选项的禁用为选项对象的某个属性值	String	—	'disabled'
leaf	指定选项的叶子节点的标志位为选项对象的某个属性值	String	—	'leaf'