级联选择 Cascader #

指在选择器选项数量较多时，采用多级分类的方式将选项进行分隔

基本使用 #

级联选择器的基本用法。

可清空 #

设置 clearable 属性即可

仅显示最后一级 #

设置 show-all-levels 属性为 false 即可。可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径

多选 #

设置 multiple 属性即可

选择任意一级选项 alpha.36.2 #

在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。 启用该功能后，可让父子节点取消关联，选择任意一级选项

可通过设置 check-strictly 属性来设置父子节点取消选中关联，从而达到选择任意一级选项的目的

自定义输入框内容 #

设置 input-label-format 函数对显示的内容进行格式化处理

禁用选项 #

指定 option 的 disabled 为 true，可以禁用该选项

底部插槽 #

设置 show-footer 属性即可开启底部插槽

模糊搜索 #

可以利用模糊搜索功能快速查找选项。通过添加 filterable 来启用过滤。filter-method 自定义搜索方法，该方法必须是个函数，第一个参数是 node，第二个参数是搜索关键词query，通过返回布尔值表示是否命中

自定义节点内容 #

你可以通过 scoped slot 自定义节点的内容。 你可以访问 scoped 中的 node 和 data 属性，分别表示当前节点的 Node 对象和当前节点的数据

展开子菜单 #

通过设置 expand-child 可以在选择时展开第一个子菜单

自定义触发元素 #

通过设置 trigger 插槽，即可实现自定义触发器

CascaderNode & CascaderData #

export interface CascaderData {
  value?: string | number
  label?: string
  render?: RenderFunction
  disabled?: boolean
  children?: CascaderData[]
  isLeaf?: boolean
}

export interface CascaderNode {
  key: string
  parent?: CascaderNode | null
  raw: CascaderData

  label?: string
  value?: string | number
  render?: RenderFunction
  isLeaf?: boolean
  disabled?: boolean
  level: number
  index: number
  pathNodes: CascaderNode[]
  pathValue?: any[]
  pathLabel?: string[]

  children?: CascaderNode[]
  hasChildren?: boolean
  selectionDisabled?: boolean

  totalLeafNumber?: number
}

API #

Attributes #

Option #

Events #

Slots #