element-ui中select的下滑加载更多

1、首先给 el-select 绑定一个事件,这个事件 element 是不支持的,所以要自己定义一个属性:

directives: {

    'el-select-loadmore': {

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

        });

      }

    }

  }

2、在el-select中绑定这个属性, loadmore 就是你的逻辑

      // 你的代码

3、loadmore 中写自己的逻辑

当鼠标滑到 option 下面的时候,就会触发 loadmore 函数,就可以实现鼠标下拉加载更多。



此文章出自:要怎么样才能取一个独一无二的名字

原文出处链接:http://blog.csdn.net/qq_35976676/article/details/108144988

你可能感兴趣的:(element-ui中select的下滑加载更多)