element ui 下拉框加载事件写法

根据搜索条件去分页加载选项列表,可以写如下的指令

directives: {
    loadmore: {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function() {
          const CONDITION =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (CONDITION) {
            binding.value();
          }
        });
      }
    }
  },
  
  使用的时候  
  
  <el-select
    v-loadmore="loadData"
  >
    <el-option
      v-for="(item,index) in list"
      :key="index"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
  
  
  
     async loadData() {
      this.page++;
      await this.getList;
    },
    

但是要注意的问题是第一次加载的数据不要过多,不然element ui的这样式就出不来滚动条了,
还要自己去修改样式,我的这个实验的是每次一页10条去加载的,方案可行还要自己去修改样式,
我的这个实验的是每次一页10条去加载的,方案可行

原文地址:https://www.cnblogs.com/llcdbk/p/12868784.html