vue使用自定义指令使用滚动加载

使用自定义指令directives来实现滚动加载，下面以下拉框滚动加载为例

<template>
   <el-select
      v-model="ruleForm.train_set_id"
      v-loadMore="loadMore"
      placeholder="请选择"
    >
       <el-option
          v-for="item in dataList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
    </el-select>
</template>
<script>
export default {
data() {
return {

}
}
 directives: {
    loadMore: {
      bind(el, binding) {
        let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        select_dom.addEventListener('scroll', function () {
          let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (height) {
            binding.value()
          }
        })
      }
    },
 },
 methods: {
    loadMore() {
      if (this.dataAllNum > this.datasetsList.length) {
        this.dataPage++
        let headers = { "token": JSON.parse(window.localStorage.getItem('token')) }
        this.$axios.get(`url`, {
          params: {
            page: this.dataPage,
            page_size: this.dataPageSize,
          },
          headers
        }).then(res => {
          res.data.data.forEach(item => {
            this.dataList.push(item)
          })
          this.dataAllNum = res.data.query_total
        })
      }
    },
 }
 }
 </script>