el-autocomplete带输入建议———Element - The world's most popular Vue UI framework
<el-autocomplete class="screen-int" v-model="maintainName" :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect" ></el-autocomplete>
// 模糊查询
querySearch(queryString, cb) {
var maintainHis = this.maintainHis;
var results = queryString
? maintainHis.filter(this.createStateFilter(queryString))
: maintainHis;
cb(results);
},
createStateFilter(queryString) {
return (maintainName) => {
return (
maintainName.value.toLowerCase().indexOf(queryString.toLowerCase()) >
-1
);
};
},
handleSelect(item) {
console.log(item);
},
注意，组件默认匹配value值内容，若后端返回字段名称不同，需转化为value。
例：将后端 reportRecordName 字段名转化为 value
this.maintainHis = JSON.parse(
JSON.stringify(this.maintainHis).replace(
/"reportRecordName"/g,
'"value"'
)
);