级联选择器 Cascader

单选级联

多选级联

配置支持搜索

自定义宽度

自定义分隔符

子父级不联动

仅末级显示复选框(多选)

自定义节点右侧标签

简易样式

懒加载

多选加确认按钮

自定义触发器

API

Attributes

名称类型可选值默认值说明
modelValue/v-modelstring/string[]--''/[]绑定值, 单选是字符串, 多选是字符串数组
optionsItem[]--[]下拉列表选项数组, item 类型{id:string,name:string}
disabledboolean--false禁用整个组件
captionstring--''前置标签
clearableboolean--true是否可以清空
filterableboolean--false是否支持搜索
multipleboolean--false是否多选
showSelectCountbooleantrue/falsefalse仅开启多选有效,是否仅仅显示选中数量,默认显示tag
placeholderstring--'请选择'
maxTagCount(新规范已废弃)number--1最多显示多少个,默认显示一个, tag 剩余的显示+n ,0 表示全部展开
triggerstringclick/hoverclick触发方式
popoverClassstring--''设置下拉框的class
rangeSeparatorstring--' / '选中结果连接符
widthnumber/string数字/auto240自定义选择框宽度(下拉看板每一层级的宽度为该宽度的一半、且最小宽为120px)
maxWidthnumber--360设置触发器中选中值部分的最大宽度, 此属性需配合 width='auto'来使用
lastStageboolean--false设置lastStage属性为true,设置仅仅末级显示复选框
checkStrictlyboolean--false设置checkStrictly属性为true,可取消子父级联动,从而达到选择任意一级
valueKeystring--id属性自定义数据字段
labelKeystring--name属性自定义数据字段
childrenKeystring--children属性自定义数据字段
multipleTagsMaxHeight(新规范已废弃)number--0多选tags最大高度,超出出现滚动条,默认高度自动撑开
dropPanelSingleWidthnumber--0下拉看板每一层级的宽度,默认为width的一半,width=auto时为120px,hasConfirm=true时最小宽度为165px
placeholderStyleobject--"{color: 'var(--gray-400)'}"自定义placeholder样式(目前仅支持自定义color)
teleportTostring,object--body下拉看板渲染到指定元素下
simpleStyleboolean--false开启简易样式
loadDatafunction----懒加载(与filterable不可同时使用)
popoverAttrsPopoverProps{}--popover组件的属性 属性参考 Popover props
hasConfirmbooleanfalse/truefalse多选添加取消、确认按钮
loadingbooleanfalse/truefalse数据为空时,是否显示loading动画
autoClearSearchboolean--true失去焦点后自动清空筛选
tipsTagHandleName(name,index,items) => any--undefined自定义 select 多选 tips 中的 tag 文案
hasCheckAllbooleanfalse/truefalse多选添加全选

Events

名称回调参数说明
change(value: string| string[])绑定值变化时触发
removeTag(新规范已移除)(value: Item)tag 的移除事件, 返回被移除的 Item 对象
clear--clear 事件
blur--blur 事件
focus--focus 事件

Function

方法名说明参数
focus使选择器的输入框获取焦点, 并打开下拉框-
blur使选择器的输入框失去焦点, 并隐藏下拉框-

最近更新于: