🔥根据关键词对接口做模糊匹配搜索

1.使用可搜索的input框

<el-autocomplete
v-model="form.createBy"
fetch-suggestions="queryCreate"
value-key="fullUserName" // 列表展示出来的key
placeholder="请输入创建人"
@select="handleSelect" // 选择选项之后的回调
></el-autocomplete>

2.写搜索方法

//模糊匹配名称
queryCreate(querystring,cb){
var results = [] // 存放搜索之后的数据
getCreateByList({
userName:querystring,
).then(res)=>{
const data = res.data.data; // 是一个数组
if (data){
//循环放到一个远程搜索需要的数组
for (let i=0;i <data.length;i++){
results.push(data[i]);
console.log('results',results);
cb(results);
}else{
results=[];
cb(results);
}

3.选择之后的处理

handleSelect(item){
//console.log('itemsss',item);
this.form.createBy = item.fullUserName
}

select框远程搜索并且支持多选

<el-select
v-model="form.searchBys"
multiple
filterable
remote
placeholder="请输入查询人”
remote-method="querySearch"
loading="loading"
style="width:100%;"
@focus="querySearch"
>
<el-option
v-for="item in options"
key="item.userName"
label="item.fullUserName"
value="item.userName"
〉
</el-option>
</el-select>

data(){
    return {
        options:[] // 搜索之后要显示的列表数组
    }
}


/创建人模糊沓询
//模糊匹配名称
queryCreate(queryString){
if (querystring !=""){
getCreateByList({
userName:queryString,
}).then((res)=>{
const data = res.data.data; // 后端返回的搜索数组
console.log("data",data);
if (data){
this.options data.map((item)=>{ // map方法不会改变原数组，而是会返回一个新的数组
//console.Log('map',item);
return item;
});
console.log("this.option",this.options);
}else{
this.options []
}
})
}
}