Error in directive loadmore update hook: "TypeError: Cannot read properties of null (reading 'addEventListener')"
在使用 Select 选择器的远程搜索、滚动加载时发生报错,是因为directives
中的SELECTWRAP_DOM
为空
只需要在<el-select>
中加入:popper-append-to-body="false"
<el-select
v-model="nameList"
multiple filterable remote reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
:popper-append-to-body="false"
v-loadmore="loadMore">
<el-option v-for="(item,index) in options" :key="index" :value="item" :label="item">
</el-option>
</el-select>
methods:{
// 下拉加载更多
loadMore(){
console.log(123);
},
},
//自定义指令
directives:{
loadmore(el, binding){
// 获取element-ui定义好的scroll盒子
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()
}
})
}
}