AutoComplete 自动生成
规则
js
{
type: "autoComplete",
title: "自动完成",
field: "auto",
value: "xaboy",
props: {
fetchSuggestions: function (queryString, cb) {
cb([
{value: queryString}, {value: queryString + queryString}
]);
}
}
}
完整配置项:Element_AutoComplete
value :String
Props
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
placeholder | 占位文本 | string | — |
clearable | 是否可清空 | boolean | false |
disabled | 自动补全组件是否被禁用 | boolean | false |
valueKey | 输入建议对象中用于显示的键名 | string | value |
debounce | 获取输入建议的防抖延时,单位为毫秒 | number | 300 |
placement | 菜单弹出位置 | enum | bottom-start |
fetchSuggestions | 获取输入建议的方法, 仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 | Array / Function | — |
triggerOnFocus | whether show suggestions when input focus | boolean | true |
selectWhenUnmatched | 在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件 | boolean | false |
name | 等价于原生 input name 属性 | string | — |
ariaLabel | 原生 aria-label 属性 | string | — |
hideLoading | 是否隐藏远程加载时的加载图标 | boolean | false |
popperClass | 下拉列表的类名 | string | — |
teleported | 是否将下拉列表元素插入 append-to 指向的元素下 | boolean | true |
appendTo | 下拉框挂载到哪个 DOM 元素 | CSSSelector / HTMLElement | — |
highlightFirstItem | 是否默认高亮远程搜索结果的第一项 | boolean | false |
fitInputWidth | 下拉框的宽度是否与输入框相同 | boolean | false |
Events
事件名 | 详情 | 类型 |
---|---|---|
blur | 当选择器的输入框失去焦点时触发 | Function |
focus | 当选择器的输入框获得焦点时触发 | Function |
input | 在 Input 值改变时触发 | Function |
clear | 在点击由 clearable 属性生成的清空按钮时触发 | Function |
select | 点击选中建议项时触发 | Function |
change | 在 Input 值改变时触发 | Function |
Slots
插槽名 | 描述说明 | 类型 |
---|---|---|
default | 自定义输入建议的内容。 | object |
prefix | 输入框头部内容 | - |
suffix | 输入框尾部内容 | - |
prepend | 输入框前置内容,在 prefix 之前 | - |
append | 输入框后置内容,在 suffix 之后 | - |
loading | 修改加载区域内容 | - |