The el-select selector in vue realizes the bottom loading, which is realized by custom instructions (directives)

The el-select selector in vue realizes the bottom loading, which is realized by custom instructions (directives)

1. Use the custom command
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. Custom commands

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. Custom event, triggered when the scroll bar touches the bottom

  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);
    }
  }