当时需求是列表数据 支持手动输入和下拉选择,能够根据手动输入的关键字,模糊匹配对应的数据,如果不存在就提示用户需要先去创建
<el-autocomplete
v-model.trim="archivesEdit.propertyOwner"
:fetch-suggestions="querySearchAsync"
placeholder="请输入"
:popper-append-to-body="false"
style="width:100%"
>
<!-- 解决匹配不到提示无匹配数据 -->
<template v-if="noData" slot-scope="{ item }">
<div class="default">{{ item.default }}</div>
</template>
</el-autocomplete>
querySearchAsync(queryString, cb) {
let restaurants = this.restaurants;
let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
this.noData = false;
if (results.length === 0) {
results = [{ default: "无此产权方,需要先去创建" }];
this.noData = true;
}
// 调用 callback 返回建议列表的数据
results.map((item) => {
return item.value;
});
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 1000 * Math.random());
},
createStateFilter(queryString) {
return (restaurant) => {
let restaurants = restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
return restaurants;
};
},