级联选择

介绍

级联选择框，用于多层级数据的选择，典型场景为省市区选择。

API

Props

Props 属性

参数	说明	类型	默认值
默认状态	组件的状态, "默认"|"禁用"|"隐藏"|"只读"	string	'default'
标题	左侧标题内容	string	"级联选择"
显示标题	是否显示左侧标题内容	boolean	true
数据字段	表单字段名	string	"CASCADER_随机八位字符"
默认值	单选框选项默认值	string	''
占位提示	占位提示内容	string	"请输入"
格式化展示内容	自定义已选值的展示方式	(ctx, params:{options: Array<any>})=> string	-
是否显示顶部栏	是否显示顶部栏	boolean	true
顶部栏标题	顶部栏标题内容	string	"请选择地区"
选项数据	配置可选项的数据	Array<{value:string, text:string, children:Array<any>}>	-
自定义字段名	配置选项数据的字段名	{ value:string, text:string, children:string }	-
是否开启手势滑动切换	是否开启手势滑动切换	boolean	true
关闭图标	选择面板的关闭图标	string	"icon-close"
选中状态的高亮颜色	选中状态的高亮颜色	string	-

Props 样式

参数	说明	类型	默认值
CSS样式	自定义样式	string	-
类名绑定	给组件添加自定义类名	string	-
是否显示内边框	是否显示内边框	boolean	false
标题后添加冒号	是否在标题后添加冒号	boolean	false
标题宽度	标题宽度	string	"6.2em"
标题对齐方式	标题对齐方式。"顶部"|"左"|"居中"|"右"	string	"左"
内容对齐方式	标题对齐方式。"顶部"|"左"|"居中"|"右"	string	"左"
内容对齐方式	标题对齐方式。"顶部"|"左"|"居中"|"右"	string	"左"
内容垂直居中	内容垂直居中	boolean	false

Props 高级

参数	说明	类型	默认值
气泡提醒	表单项气泡提醒，点击标题右侧图标可查看	string	''
子选项异步加载函数	以自定义异步加载的方式展开子选项	( ctx, params: {options: Array<any>, done: (children: Array<any>) => {} } )	false
必填	未输入内容时校验不通过	boolean	false
自定义函数	自定义校验函数，可配置校验规则与校验提示内容	boolean	false
循环	循环渲染设置	-	-

Events

Events 属性

事件名	说明	回调参数
onChange	值发生改变时触发	ctx, params: {options: Array<any>}
onClear	点击清除按钮时	ctx, params: {options: Array<any>}
onClose	关闭时触发	ctx, params: {options: Array<any>}
onClickTab	点击标签时触发	ctx, params: {tabIndex: number, title: string}
onFinish	全部选项选择完成后触发	ctx, params: { value: string | number, selectedOptions: Array<any>, tabIndex: number }