element ui vue el-select组件滚动加载下一页数据

本身经历，input组件使用类似，但是最后渲染数据的时候总是不成功，因为下拉框中每次数据的刷新都要被触发，我实现不了，所以放弃了，选用的select组件，望已经实现的大佬指教啊，，，

1.给该组件添加一个滚动触底的事件（export default中，data上面）

directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', () => {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight
          if (condition) {
            binding.value()
          }
        })
      },
    },
  },

**

2.select代码中使用上面的方法

3.获取后台数据即可

remoteMethod(query) {
      this.query = query
      this.roleChildLoading = true
      this.infoPage = 1
      this.roleChildOptions = []
      setTimeout(() => {
        this.roleChildLoading = false
        if (this.ruleForm.roleValue === 'agent') {
          this.getMachineTransferToAgentOptions()
        } else if (this.ruleForm.roleValue === 'company') {
          this.getMachineTransferToCompanyOptions()
        }
      }, 500)
    },