elementui auto
ElementUI AutoComplete 组件使用指南
ElementUI 的 AutoComplete 组件是一个带输入建议的输入框，常用于搜索框或表单中需要自动补全的场景。
基本用法
通过 v-model 绑定输入值，fetch-suggestions 属性设置获取建议的方法：
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>data() {
return {
state: '',
restaurants: []
}
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
}
}自定义模板
可以自定义建议项的显示方式：
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
>
<template #default="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>远程搜索
结合远程接口实现搜索建议：
querySearchAsync(queryString, cb) {
axios.get('/api/search', { params: { q: queryString } })
.then(response => {
cb(response.data);
});
}属性配置
常用属性：
value-key: 指定建议对象中用于显示的键名debounce: 输入去抖延迟，默认300毫秒trigger-on-focus: 是否在输入框聚焦时显示建议列表select-when-unmatched: 在输入框没有匹配项时是否允许选中输入内容
事件处理
常用事件：
select: 点击选中建议项时触发change: 输入框值变化时触发blur: 输入框失去焦点时触发
handleSelect(item) {
console.log(item);
}样式定制
可以通过覆盖CSS类名来自定义样式：
.el-autocomplete: 组件容器.el-autocomplete-suggestion: 建议列表.el-autocomplete-suggestion__wrap: 建议列表内容容器
与表单验证结合
可以配合Form组件进行验证：
<el-form :model="form" :rules="rules">
<el-form-item prop="name">
<el-autocomplete
v-model="form.name"
:fetch-suggestions="querySearch"
placeholder="请输入名称"
></el-autocomplete>
</el-form-item>
</el-form>rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
}
