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()设置焦点
快速入门 Button 按钮 Affix 固钉 Breadcrumb 面包屑 Dropdown 下拉菜单 Dropdown 下拉菜单 Dropdown 展开隐藏方法 Dropdown 属性及事件 Menu 导航菜单 Menu 导航菜单 Menu 导航菜单属性及事件 Pagination 分页 Pagination 跳转 Pagination 自定义下拉选项 Pagination 选择每页数量 Pagination 自定义页码文字 Pagination 样式风格 Pagination 属性列表 Pagination 事件列表 Steps 步骤条 Steps 步骤条基本用法 Steps 自定义图标和html Steps 属性列表 AutoComplete 自动填充 AutoComplete 自动完成组件 AutoComplete 前端筛选函数 AutoComplete 自定义选项 AutoComplete Ajax服务器端数据 AutoComplete 查询模式 AutoComplete 属性列表 AutoComplete 事件 AutoComplete 方法列表 Cascader 级联选择 Cascader 基础用法 Cascader 搜索筛选 Cascader ajax服务器端加载 Cascader 样式及自定义图标 Cascader fieldNames 自定义字段 Cascader API属性及事件 Cascader 属性及事件Node.js版 Cascader 属性及事件浏览器版 Checkbox 多选框 Checkbox 多选框用法 Checkbox 自定义布局 Checkbox 全选反选 Checkbox 属性事件列表 DatePicker 日期选择框 DatePicker 日期选择框用法 DatePicker 设置不可选日期 DatePicker 选择时间 DatePicker 设置日期格式 DatePicker 日期范围选择 DatePicker 定制日期单元格 DatePicker 自定义渲染 DatePicker 属性和事件 Input 输入框 Input 输入框用法 Input 密码框 Input 图标 Input 搜索框 Input 格式化提示 Input 属性及事件列表 Input addonAfter属性 InputNumber 数字输入框 InputNumber 数字输入框 InputNumber 属性和事件 Mentions 提及 Mentions提及用法 Mentions 属性和事件 Radio 单选框 Radio 单选框用法 Radio 单选框分组 Radio 按钮样式 Radio 属性事件 Rate 评分组件 Rate 评分组件用法 Rate 属性和事件 Select 下拉框 Select 下拉框用法 Select 下拉框联动 Select 下拉框多选 Select 下拉框分组 Select 搜索框 Select 属性和事件 Slider 滑动输入条 Slider 滑动输入条 Slider 属性 afterChange 事件 change 拖动事件 Switch 开关 Switch 开关用法