vue中el-select选择器实现触底加载，通过自定义指令(directives)实现

vue中el-select选择器实现触底加载，通过自定义指令(directives)实现

1.使用自定义指令
v-XXXX

// 初始化我是默认展示20条数据
<el-select
    v-model="rechargeFormData.memberId"
    // 此处绑定自定义指令
    v-loadMore="loadMore"
    // 可清空数据
    clearable
    filterable
>
   <el-option v-for="item in showMemberData" :label='item.name' :value="item.id" :key="item.id"></el-option>
</el-select>

2.自定义指令

export default {
  directives: {
    loadMore: {
      // el 可以获取当前dom节点， binding一个对象(具体可以自行打印观察)，vnode第三个参数为虚拟节点
      bind (el, binding) {
        // 获取element，定义scroll
        const selectDom: any = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
         // 添加滚动事件
	selectDom.addEventListener('scroll', function () {
	    // scrollHeight所有数据占据面的一个高度,，scrollTop滚动条滚走的区域高度，clientHeight可视区域面积高度
              const height = selectDom.scrollHeight - selectDom.scrollTop <= selectDom.clientHeight;
          if (height) {
            binding.value();
          }
        });
      }
    }
}

3.自定义事件，滚动条触底时触发

  loadMore () {
    if (this.memberDataCopy.length !== this.allMemberTotal) {
      // 触底开启加载状态
      this.loading = true;
      const params = {
        size: this.size += 10,
        currentPage: this.currentPage
      };
      // 延迟了500毫秒调接口拿数据
      setTimeout(async () => {
        const data = await getConsumerList(params);
        this.memberDataCopy = data.records;
        this.showMemberData = data.records;
	// 拿到数据后关闭加载状态
        this.loading = false;
      }, 500);
    }
  }