vue项目el-select下拉列表懒加载

el-select下拉列表懒加载 vue技术交流群（864583465)

<template>
        <el-select
            popper-class="pat-select"
            v-model="selectedValue"
            v-el-select-loadmore="loadMore(rangeNumber)"
            filterable
            :filter-method="filterMethod"
            value-key="index"
            placeholder="请选择">
            <el-option
              v-for="item in patientList.slice(0, rangeNumber)"
              :key="item.index"
              :label="item.patInfo"
              :value="item">
              {{ item.patInfo }}
            </el-option>
          </el-select>
</template>

@Component({
  directives: {
    'el-select-loadmore':(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 <= this.clientHeight + 10;
          if (condition) binding.value();
        });
      }
    },
  }
})
export default class extends Vue {
  private selectedValue: string = ''
  private rangeNumber: number = 10
  private List: 数据类型[] = []
  private allList: 数据类型[] = []

  loadMore(n) {
    console.log('loadMore:' + n, this.rangeNumber)
    // n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
    // elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
    return () => (this.rangeNumber += 5); // 每次滚动到底部可以新增条数  可自定义
  }
  filterMethod(query = ''){
    try {
      console.log('query:' + query)
      this.rangeNumber = 10
      this.List = this.allList.filter(item => {
        return item.someKey.includes(query)
      })
    } catch (e) {
      console.log(e)
    }
  }

}