template部分:
<el-autocomplete
prefix-icon="el-icon-search" // 输入框头部图标
v-model="engineeringName" // 绑定的值
:fetch-suggestions="getProjectName" // 第一次调用回调函数
placeholder="请选择工程名称"
@select="handleSelect" // 选中后调用的事件
:scrollBottom="handleScrollBottom" // 滚动触底触发回调函数
>
<template slot-scope="{ item }"> // 插槽展示名称
<div>
<p class="orgFullName" :title="item.constructionBidName">
{{ item.constructionBidName }}
</p>
</div>
</template>
</el-autocomplete>
javaScript部分:
// 第一次调用的回调
// pageNo:页码
// pageSize: 每页条数
// pageTotal: 总页码
getProjectName(queryString, callback) {
this.pageNo = 0;
const PARAMS = {
parentProjectId: this.$route.query.etag,
pageNo: this.pageNo,
pageSize: 10
};
getList(PARAMS).then(res => {
if (res.status === 200) {
const { code, data, message } = res.data;
if (code === "0") {
const list = data.rows || [];
this.pageTotal = data.recordsTotal / 10;
if (this.pageNo < this.pageTotal) {
this.pageNo++;
}
callback(list);
} else {
this.$message.error(message);
}
}
});
},
// 第二次调用回调
handleScrollBottom(data, callback) {
if (this.pageNo > this.pageTotal) return; // 当前页码大于总页码退出回调
let params = {
shortName: this.$route.query.etag,
pageNo: this.pageNo,
pageSize: 10
};
getList(params)
.then(res => {
if (res.status === 200) {
let { code, data, message } = res.data;
if (code === "0") {
const list = data.rows || [];
this.pageNo++; // 页码++
callback(list);
} else {
this.$message.warning(message);
}
}
})
.catch(err => {
console.log(err);
});
},