input 要输入内容就搜索,或者点击搜索图标搜索
2020-10-28 本文已影响0人
流泪手心_521
1.用watch监听一下input值的变化
watch: {
'searchParams.searchKey'() {
utils.throttle(() => {
this.searchCompany();
}, 300);
},
}
//this.seatchCompany的方法
searchCompany() {
this.searchParams.pageNo = 1;
this.personList = [];
this.getPersonList();
},
3.this.getPersonList的方法
getPersonList() {
let params = 'pageNo=' + this.searchParams.pageNo +
'&pageSize=' + this.searchParams.pageSize +
'&searchKey=' + this.searchParams.searchKey+
'&position=' + this.tagItem;
this.axios
.get(API.company.companyData + '?' + params)
.then((res) => {
if (res.data.status == 0) {
if(res.data.data.resultData.length === 0) {
this.finishedText = "暂无数据";
} else {
this.finishedText = "没有更多了";
}
let oldList = JSON.parse(JSON.stringify(this.personList))
let tempList = res.data.data.resultData.map((item, index) => {
return Object.assign({}, item, {
photoPath: PATH_IMG + item.photoPath,
});
});
this.personList = oldList.concat(tempList)
this.loading = false
if (res.data.data.totalPages > this.searchParams.pageNo) {
this.finished = false;
this.searchParams.pageNo += 1
} else {
this.finished = true;
}
} else {
this.alert(res.data.message);
}
})
.catch((err) => {
this.alert(err);
});
},
4.html
<div class="search_box">
<input class="search_input" type="text" v-model.trim="searchParams.searchKey" placeholder="输入姓名或企业名称">
<div class="search_btn" @click="searchCompany">
<img src="../../assets/img/search_icon.png" alt="search">
</div>
</div>