Ant Design Vue Cascader API属性及事件列表浏览器版

本文介绍Ant Design Vue Cascader API属性及事件列表的浏览器版,如果你是基于Node.js进行开发请点击这里查看。

参数列表

 <a-cascader :options="options" @change="onChange" placeholder="请选择城市" ></a-cascader>

:符号表示属性变量,@符号表示事件 

参数名称
说明类型默认值
allow-clear是否支持清除已选择内容
<a-cascader  :allow-clear="false"></a-cascader>
booleantrue
auto-focus当前控件是否自动获取焦点,示例代码如上
<a-cascader  :auto-focus="true"></a-cascader>
booleanfalse
change-on-select设置为true,就是每次点击选择时都会触发change事件
<a-cascader  :change-on-select="true"></a-cascader>
booleanfalse
default-value默认的选中项
<a-cascader  :default-value="['shanghai','qingpuqu']" ></a-cascader>
string[] | number[][]
disabled是否禁用booleanfalse
display-render选择完成后执行的渲染函数,可以自定义选择框的内容点击查看例子

expand-trigger下一级级菜单的展开方式,点击或移动在上面时
'click' 和 'hover'
stringclick
field-names自定义下拉项的数据结构中的label name children 的字段点击查看例子{ label: 'label', value: 'value',
children: 'children' }
getPopupContainer组件渲染的父节点。默认渲染到 body 上,如遇到菜单滚动定位问题,可修改为滚动的区域试试看,并相对其定位。Function(triggerNode)() => document.body
loadData可以通过这个参数发送一个ajax请求,远程返回数据,
不能与 showSearch 搭配使用。
点击查看详情
not-found-content当下拉项为空时显示的内容string'Not Found'
options下拉项数据源object
placeholder选择输入框提示文字string'请选择'
popup-class-name自定义下拉项的浮层类名
<a-cascader popup-class-name="itxst-class" ></a-cascader>
string-
popup-style自定义下拉项的浮层样式
<a-cascader :popup-style="{color:'red'}"></a-cascader>
object{}
popup-placement浮层预设位置:bottomLeft bottomRight topLeft topRightEnumbottomLeft
popup-visible下拉项的浮层的隐藏显示boolean
show-search在选择输入框中开启搜索功能,点击查看详情booleanfalse
size选择输入框大小,可选 large default small,注意不是下拉浮层的大小stringdefault
suffixIcon自定义的选择输入框的后缀图标string | VNode | slot-
value(v-model)设置获取选中项string[] | number[]-

Cascader事件

事件名称说明回调参数
change选择完成后的回调(value, selectedOptions) => void
popupVisibleChange显示/隐藏浮层的回调(value) => void

Cascader方法

方法名称
说明
blur()清除焦点
focus()设置焦点