template
<el-select
v-model="form.userCode"
v-el-select-loadmore="loadmore"
filterable
remote
reserve-keyword
:remote-method="userRemoteMethod"
:loading="personLoading"
>
<el-option
v-for="item in personOptions"
:key="item.userCode"
:label="item.phonenumber"
:value="item.userCode"
/>
</el-select>
methods
// 远程搜索
userRemoteMethod(query) {
if (query !== '') {
this.personLoading = true;
this.queryParams.phonenumber = query;
this.queryParams.pageNum = 1;
this.personOptions = [];
this.getUserList();
} else {
this.personOptions = [];
}
},
// 调用接口查询数据
getUserList() {
listAllUser(this.queryParams).then(response => {
this.personLoading = false;
this.personOptions = [...this.personOptions, ...response.rows];
});
},
// 远程搜索列表触底事件
loadmore() {
this.queryParams.pageNum++;
this.getUserList();
},
main.js
import elementDirective from './directive';
Vue.use(elementDirective);
directive.js
import elSelectLoadmore from './elSelectLoadmore';
const install = function(Vue) {
Vue.directive('el-select-loadmore', elSelectLoadmore);
};
export default install;
elSelectLoadmore.js
export default {
inserted(el, binding, vnode) {
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function() {
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
};