Cascader 多级联动
规则
基础示例
Props 配置示例
三级联动
自定义字段名
禁用与只读对比
Events 事件示例
监听选择变化
选择后联动更新
完整配置项:Vant_Cascader
value :String|Number
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 选中项的值 | string | number | - |
| title | 顶部标题 | string | - |
| options | 可选项数据源 | CascaderOption[] | [] |
| placeholder | 未选中时的提示文案 | string | 请选择 |
| disabled | 是否禁用输入 | boolean | false |
| active-color | 选中状态的高亮颜色 | string | #1989fa |
| swipeable | 是否开启手势左右滑动切换 | boolean | true |
| closeable | 是否显示关闭图标 | boolean | true |
| show-header | 是否展示标题栏 | boolean | true |
| close-icon | 关闭图标名称或图片链接，等同于 Icon 组件的 name 属性 | string | cross |
| field-names | 自定义 options 结构中的字段 | CascaderFieldNames | { text: 'text', value: 'value', children: 'children' } |
Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 选中项变化时触发 | { value: string | number, selectedOptions: CascaderOption[], tabIndex: number } |
| finish | 全部选项选择完成后触发 | { value: string | number, selectedOptions: CascaderOption[], tabIndex: number } |
| close | 点击关闭图标时触发 | - |
| click-tab | 点击标签时触发 | tabIndex: number, title: string |