el-select懒加载

有时候option选项太多，一次查询可能会返回上千条数据，这时候就需要懒加载，对数据进行分页查询

在main.js中进行全局注册

Vue.directive('el-select-loadmore',{
    bind(el,binding){
        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-model="value"
    placeholder="请选择"
    filterable
    multiple
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>

methods: {
    loadmore() {
      this.formData.pageIndex++;
      this.getList(this.formData);
    },
    getList(formData) {
      // 这里是接口请求数据, 带分页条件
      const _res = [1, 2, 3]; // 请求得到的数据
      this.options = [...this.options, ..._res];
    }
}