Skip to content

AutoComplete 自动完成

规则

基础示例

Props 配置示例

远程搜索(模拟接口)

自定义选项

禁用

尺寸对比(小 / 中 / 大)

Events 事件示例

监听选择变化

选择后填充详细信息

完整配置项:Ant-design-vue_AutoComplete

value :String

Props

参数说明类型默认值
allowClear支持清除, 单选模式有效booleanfalse
autofocus自动获取焦点booleanfalse
backfill使用键盘选择选项的时候把选中项回填到输入框中booleanfalse
bordered是否有边框booleantrue
clearIcon使用插槽自定义清除按钮slot<CloseCircleFilled />
default (自定义输入框)自定义输入框slot<Input />
defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
defaultOpen是否默认展开下拉菜单boolean-
disabled是否禁用booleanfalse
popupClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动boolean | numbertrue
dropdownMenuStyledropdown 菜单自定义样式object
filterOption是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 falseboolean or function(inputValue, option)true
open是否展开下拉菜单boolean-
option通过 option 插槽,自定义节点v-slot:option="{value, label, [disabled, key, title]}"-
options自动完成的数据源DataSourceItemType[]
placeholder输入框提示string | slot-
status设置校验状态'error' | 'warning'-

Events

事件名称说明回调参数
blur失去焦点时的回调function()
change选中 option,或 input 的 value 变化时,调用此函数function(value)
dropdownVisibleChange展开下拉菜单的回调function(open)
focus获得焦点时的回调function()
search搜索补全项的时候调用function(value)
select被选中时调用,参数为选中项的 value 值function(value, option)
clear清除内容时回调function

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用