核心 directives（自定义指令）
<el-select
id="select-lazy"
v-model.trim="selectValue"
v-el-select-loadmore="handleLoadmore" // 下拉懒加载
class="select-lazy"
filterable
:remote="remote"
:allow-create="allowCreate"
:remote-method="handleAttrValueFilter" // 调用搜索接口
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
directives: {
'el-select-loadmore': {
bind(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 - 15 <= this.clientHeight;
if (condition) {
binding.value();
}
});
},
},
},
data() {
return {
selectValue: '',
selectObj: {
pageNum: 1,
pageSize: 50,
name: '',
},
options: [],
selectLoading: false
};
},
methods: {
/**
* 下拉加载
*/
handleLoadmore() {
if (!this.selectLoading) {
this.selectObj.pageNum++;
this.getList();
}
}
/**
* 搜索
*/
handleAttrValueFilter(name) {
if (!this.selectLoading) {
this.selectObj.name = name;
this.selectObj.pageNum = 1;
this.getList();
}
},
},
首次发帖 希望能对大家有所启发
