自定义指令:
directives: {
'loadmore': {
inserted(el, binding) {
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();
}
});
}
}
},
引用自定义指令
<el-select v-model="formData.userArr" filterable remote multiple reserve-keyword
:remote-method="getUserList" :loading="loading" v-loadmore="loadMore"
placeholder="请输入姓名/学工号/部门">
<el-option class="select-options" style="max-width: 360px"
v-for="item in userOptions"
:key="item.accountName"
:label="item.name+'|'+item.accountName+'|'+item.organizationName"
:value="item.accountName">
</el-option>
</el-select>
methods:
loadMore() {
if (this.userPagination.currentPage < this.userPagination.totalPages - 1) {
this.userPagination.currentPage++
this.getUserList(this.searchKeyword)
}
},