Cascader 级联选择器

用于从多级数据中选择其中一项，适用于省市区、组织架构等场景。

基础用法

通过 options 属性传入级联数据。

请选择

开发指南

组件

<template>
  <ZcCascader v-model="value" :options="options" placeholder="请选择" />
</template>
<script setup>
import { ref } from 'vue'

const value = ref([])
const options = [
  {
    value: 'guide',
    label: '开发指南',
    children: [
      { value: 'discipline', label: '开发规范' },
      { value: 'navigation', label: '导航' },
    ],
  },
  {
    value: 'component',
    label: '组件',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          { value: 'button', label: 'Button' },
          { value: 'icon', label: 'Icon' },
        ],
      },
    ],
  },
]
</script>

可搜索

设置 filterable 属性可开启搜索功能。

可搜索

<template>
  <ZcCascader v-model="value" :options="options" filterable placeholder="可搜索" />
</template>

多选

设置 multiple 属性可开启多选模式。

<template>
  <ZcCascader v-model="value" :options="options" multiple placeholder="多选模式" />
</template>

Cascader API

Props

参数	说明	类型	默认值
modelValue	选中值	(string | number)[][]	[]
options	选项数据	CascaderOption[]	[]
placeholder	占位文本	string	'请选择'
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
size	尺寸	'large' | 'medium' | 'small'	'medium'
filterable	是否可搜索	boolean	false
expandTrigger	次级菜单展开方式	'click' | 'hover'	'click'
multiple	是否多选	boolean	false
checkStrictly	父子节点不关联	boolean	false

Events

事件名	说明	回调参数
change	选中值变化时触发	(value: (string | number)[][])
focus	获取焦点时触发	(event: FocusEvent)
blur	失去焦点时触发	(event: FocusEvent)
expand-change	展开节点时触发	(value: (string | number)[])