vue + element 下拉框数据太多分页加载

//template 部分 这里要写一个自定义指令
<el-select 
          v-if="length < 4"
          v-model="task"
          v-loadmore="loadMore" 
          remote
          :remote-method="remoteMethod" 
          filterable
          clearable 
          size="mini"
          placeholder="请选择" 
          style="margin-right: 20px" 
          @change="changeTask"
          >
          <el-option value="" label="全部"></el-option>//这里我的业务是要加一个全部 没有id的项 也可以不这么写，可以直接在返回数据的列表unshift加一个在最前面
          <el-option v-for="(item,index) in taskList" :key="index" :label="item.taskTitle" :value="item.id" />
 </el-select>

//script部分

<script>
import Vue from vue

Vue.directive(loadmore, {
          
   //这段代码可以直接复制
  bind (el, binding) {
          
   
    // 获取element-ui定义好的scroll盒子（获取节点名称）
    const SELECTWRAP_DOM = el.querySelector(.el-select-dropdown .el-select-dropdown__wrap)
    SELECTWRAP_DOM.addEventListener(scroll, function () {
          
   
      /*
      * scrollHeight 获取元素内容高度(只读)
      * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方   向的滚动条, 那它的scrollTop的值默认为0.
      * clientHeight 读取元素的可见高度(只读)
      * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
      * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
      */ 
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight

      if (CONDITION) {
          
   
        binding.value()
      }
    })
  }
})


export default {
          
   
 data () {
          
   
   return {
          
   
     lazyForm: {
          
   
        pageSize: 10,
        pageNum: 1,
        total: 0,
        id: ，
      }，
      taskList:[],
    }
  }
    
 },
  methods: {
          
   
    loadMore () {
          
   
    // 这里写入要触发的方法
     this.getTask()
    },
 // 获取任务
    getTask () {
          
   
    //this.lazyForm这 里还要几个参数我没写 根据自己的业务写
      this.lazyForm.pageNum++
      getDataAll(visCheckThread/selectCheckTaskById, this.lazyForm).then(res => {
          
   
        if (res.data.resultCode === 200) {
          
   
          this.lazyForm.total = res.data.resultContent.total
          if (this.taskList.length >= this.lazyForm.total) {
          
   
            return
          }
          this.taskList = [...this.taskList,...res.data.resultContent.list] //把之前的和现在的数据合并到一起
          console.log(this.taskList)
        } else {
          
   
          this.$message({
          
    message: res.data.resultMsg, type: error })
          console.log(res.data.resultMsg, res.data.resultMsg)
        }
      }).catch(() => {
          
   
        this.$message({
          
    message: 查询任务列表失败！, type: error })
      })
    },
    //好啦！到这就结束啦！

</script>