Cascader 多级联动
规则
js
{
type: 'cascader',
title: '多级选择',
field: 'Cascader',
value: '330100',
props: {
options: [
{
text: '浙江省',
value: '330000',
children: [{text: '杭州市', value: '330100'}],
},
{
text: '江苏省',
value: '320000',
children: [{text: '南京市', value: '320100'}],
},
],
placeholder: '请选择',
}
}
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 |