Element 自定义指令 下拉分页，获取无限数据

原文链接https://www.cnblogs.com/DL-CODER/p/17528026.html自定义指令loadmore:

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

methods 方法：

 
 
    loadmoreBatchList() {
      if (this.batchList.total > this.batchList.list.length) {
        this.getBatchList(data, ++this.batchList.pageNo)
      }
    },
 
    getBatchList(data, pageNo = 1) {
      // data 为接口传递的自定义数据  (即获取下一页数据)
      this.$store.dispatch('getOutboundBatchsList', {
        ...data,
        pageNo: pageNo,
        pageSize: this.batchList.pageSize
      })
        .then(({ code = 0, data = {} }) => {
          if (code == 1 && data.total) {
            this.batchList = {
              ...this.batchList,
              list: uniqBy([...this.batchList.list, ...data.list], 'id'),
              total: data.total
            }
          }
        })
    },

 data 下拉数据：

  batchList: {
    list: [],
    total: 0,
    pageNo: 1,
    pageSize: 100
   },

template 代码:

  <el-form-item>
    <el-select
      v-model="form.batchId"
      v-loadmore="loadmoreBatchList"
      placeholder="请输入批次名称"
      filterable
      clearable>
        <el-option v-for="(item, key) in batchList.list" :key="key" :label="item.batchName" :value="item.id"></el-option>
    </el-select>
  </el-form-item>