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

使用自定义指令directives来实现滚动加载，下面以下拉框滚动加载为例
v-loadmore指令要放到监测的组件父级上

<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 {
      dataList: [],
      ruleForm: {
        train_set_id: '',
      },
      dataAllNum: 0,
      dataPage: 1,
      dataPageSize: 10,
    }
 },
 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()
          }
        })
      }
    },
 },
 created() {
   this.getDataList() //获取初始列表
 },
 methods: {
    getDataList() {
      let params = {
         page: this.dataPage,
         page_size: this.dataPageSize,
      }
      this.$axios.get(`url`,params).then(res=>{
        if(res.data.code == 200) {
          this.dataList = res.data.data
          this.dataAllNum = res.data.query_total
        }
      }.catch(error=>{
        console.log(error)
      }
    },
    loadMore() { //滚动加载时触发的事件
      if (this.dataAllNum > this.dataList.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>