WinDesign

# Cascader 级联选择器

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

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

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

# 代码演示

🎉 Features

V2.4.3 新增 collapse-tags-tooltip 属性来启用鼠标悬停折叠文字以显示具体所选值的行为。

V2.4.3 新增 tags-threshold 属性开启多选且折叠标签时，超过该阈值的选项将被折叠。

级联面板

和级联选择器一样，通过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 — —
collapse-tags-tooltip 启用鼠标悬停折叠文字以显示具体所选值的行为 Boolean — false v2.4.3
tags-threshold 开启多选且折叠标签时，超过该阈值的选项将被折叠 Number — 1 v2.4.3
overflow-height 最大高度，合法的值为数字或者单位为 px 的高度。 String / Number — - V2.4.9
show-filterable-all-levels 当设置了 show-all-levels 只显示最后一级，但是搜索的时候仍旧可以显示全部的数据 Boolean — false V2.4.11
remote 当搜索结果选中时请求完整路径的 loading Boolean — false V2.4.15
reset-filter-value-on-multiple 当多选且搜索时是否重置搜索值 Boolean — True V2.4.31
long 设置选择器宽度随着容器宽度进行适配 Boolean — false V2.4.34
check-all 多选时配置全选按钮 Boolean — false V2.4.34

# 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
suggestion-click 在搜索模式下当结点点击选中时触发 index, target v2.4.15

# 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
multipleLastClick 父子节点互相关联时在叶子结点开启整个选中 Boolean — false v2.4.13
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'
上次更新: 3/12/2025, 10:44:23 AM

← Color-picker 颜色选择器 →