自动补全 AutoComplete
自动补全的基础用法
弹出框的页脚
Section titled “弹出框的页脚”自定义弹出框的页脚
下拉菜单滚动
Section titled “下拉菜单滚动”可以通过 dropdown-scroll 监听下拉菜单的滚动事件。或者通过 dropdown-reach-bottom 监听下拉菜单滚动到底部的事件。
使用 strict 属性来指明在匹配时严格区分大小写。
当前示例可以直接切换“默认固定高度”和“显式 itemSize”两种写法,适合对照迁移后推荐的最简配置。对于自动补全面板,通常不需要单独切到动态模式,除非选项内容会出现明显的多行高度变化。
通过 virtual-list-props 开启虚拟列表。AutoComplete 的下拉项当前默认按固定高度处理:如果你没有显式传 itemSize 或 minItemSize,组件会按 36px 选项高度补齐固定模式;如果要手动指定固定高度,请传 itemSize;只有显式传 minItemSize 时,才会切到动态高度模式。完整参数与迁移映射见 虚拟列表迁移指南。
<auto-complete> Props
Section titled “<auto-complete> Props”| 参数名 | 描述 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| model-value (v-model) | 绑定值 | string | - | |
| default-value | 默认值(非受控模式) | string | '' | |
| disabled | 是否禁用 | boolean | false | |
| data | 用于自动提示的数据 | (string | number | SelectOptionData | SelectOptionGroup)[] | [] | |
| popup-container | 弹出框的挂载容器 | string | HTMLElement | null | undefined | - | |
| strict | 是否为严格校验模式 | boolean | false | |
| filter-option | 自定义选项过滤方法 | FilterOption | true | |
| trigger-props | trigger 组件属性 | TriggerProps | - | 2.14.0 |
| allow-clear | 是否允许清空输入框 | boolean | false | 2.23.0 |
| virtual-list-props | 传递虚拟列表属性,传入此参数以开启虚拟滚动。迁移说明与完整参数 | VirtualListProps | - | 2.50.0 |
<auto-complete> Events
Section titled “<auto-complete> Events”| 事件名 | 描述 | 参数 | 版本 |
|---|---|---|---|
| change | 绑定值发生改变时触发 | value: string | |
| search | 用户搜索时触发 | value: string | |
| select | 选择选项时触发 | value: string | |
| clear | 用户点击清除按钮时触发 | ev: Event | 2.23.0 |
| dropdown-scroll | 下拉菜单发生滚动时触发 | ev: Event | 2.52.0 |
| dropdown-reach-bottom | 下拉菜单滚动到底部时触发 | ev: Event | 2.52.0 |
<auto-complete> Methods
Section titled “<auto-complete> Methods”| 方法名 | 描述 | 参数 | 返回值 | 版本 |
|---|---|---|---|---|
| focus | 使输入框获取焦点 | - | - | 2.40.0 |
| blur | 使输入框失去焦点 | - | - | 2.40.0 |
<auto-complete> Slots
Section titled “<auto-complete> Slots”| 插槽名 | 描述 | 参数 | 版本 |
|---|---|---|---|
| option | 选项内容 | data: OptionInfo | 2.13.0 |
| footer | 弹出框的页脚 | - |