Cascader 级联选择器

逐级选择层次数据，支持一次传入全部选项或按级加载。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 级联选项 -->
<fui-cascader :options="options" @complete="handleComplete" />

在页面中提供包含 text、value 和可选 children 的对象数组。字段名称可由相应的 Key 属性调整。

属性

属性	类型	说明	官网默认值
options	Array	层级选项	[]
textKey	String	显示文本字段	text
valueKey	String	值字段	value
childrenKey	String	子节点字段	children
srcKey	String	图片地址字段	src
value	Array	默认选中值或文本集合	[]
defaultKey	String	默认值匹配字段：value 或 text	value
stepLoading	Boolean	是否逐级请求数据	false
showBorder	Boolean	是否显示头部底边线	true
borderColor	String	边线颜色	#eee
headHeight	Number / String	头部高度，单位 rpx	88
headBackground	String	头部背景色	#FFFFFF
text	String	未选择时的文字	请选择
size	Number / String	头部字号，单位 rpx	28
color	String	头部文字颜色	#181818
activeColor	String	当前选项及对勾高亮色	#465CFF
showLine	Boolean	是否显示选项卡底线	true
height	Number / String	内容区域高度，单位 rpx	600
background	String	内容区域背景色	#FFFFFF
checkMarkColor	String	对勾颜色，未设置时使用 activeColor	-
imgWidth	Number / String	选项图片宽度，单位 rpx	48
imgHeight	Number / String	选项图片高度，单位 rpx	48
radius	Number / String	选项图片圆角，单位 rpx	0
textSize	Number / String	选项文字大小，单位 rpx	26
textColor	String	默认选项文字颜色	#181818
textActiveColor	String	选中选项文字颜色	#181818

事件

事件	说明	回调参数
change	点击级联选项	包含 layer、index 和当前项字段的对象
complete	完成选择	{ result, value, text, src }

reset() 重置选择；逐级加载时使用 setRequestData(data, layer) 设置下一层，或调用 end(layer) 结束选择。非 nvue 默认高亮色可通过 --fui-color-primary 调整。

插槽

插槽	说明
—	官网未列出该组件的插槽