Select 选择器的远程搜索、滚动加载报错Error in directive loadmore update hook…

456 阅读1分钟

Error in directive loadmore update hook: "TypeError: Cannot read properties of null (reading 'addEventListener')"

在使用 Select 选择器的远程搜索、滚动加载时发生报错,是因为directives中的SELECTWRAP_DOM为空

image.png

只需要在<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()
        }
     })
  }
}