SuperAPI AI 工具集

el-autocomplete

通用与其它

查看项目

更新于 10-15 23:32

技能介绍

el-autocomplete 是 Element Plus 提供的自动补全组件,根据用户输入实时给出建议列表,适合搜索建议、表单自动补全、地址输入和从选项中快速选择等场景。

主要能力:通过 v-model 绑定输入值;用 fetch-suggestions 方法获取建议,支持本地过滤或远程异步请求;支持自定义建议项模板(default 插槽,参数为 { item });提供 prefix、suffix、prepend、append 插槽;支持远程搜索、防抖、清空、聚焦触发等。

常用属性:model-value / v-model(绑定值,string)、placeholder、disabled、value-key(显示值字段,默认 'value')、debounce(防抖毫秒,默认 300)、placement(弹层位置,默认 'bottom-start')、fetch-suggestions((queryString, cb) => void)、popper-class、trigger-on-focus(默认 true)、name、select-when-unmatched(默认 false)、label、hide-loading(默认 false)、popper-append-to-body(默认 true)、highlight-first-item(默认 false)。

事件:select(选中建议时触发,(item) => void)、change、input、focus、blur、clear。

基本用法:模板中使用 <el-autocomplete v-model="state" :fetch-suggestions="querySearch" clearable placeholder="Please input" @select="handleSelect" />;在 script setup 中定义 querySearch(queryString, cb),按输入过滤数据后调用 cb(results)。远程搜索时在 fetch-suggestions 中发起请求并在返回后调用 cb(data)。

最佳实践:使用 debounce 减少 API 调用;用 fetch-suggestions 处理异步数据;用自定义模板展示更丰富的建议内容。

限制:资料未提供收费、价格、平台支持范围及具体版本要求等信息。