美文网首页
element select 实现滚动加载

element select 实现滚动加载

作者: 一碗米粉的故事 | 来源:发表于2020-12-02 20:58 被阅读0次

自己独立发布一个插件实现滚动加载使用

Vue.directive('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()
      }
    })
  }
})
 v-loadmore="loadMore"

一个方法:loadmore
// 下拉加载
    loadmore() {
      this.formData.pageIndex++;
      this.getUsers(this.formData);
    },
 
 getUsers(v) {
      let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
      this.userItems = this.users.filter((item, index, arr) => {
        return index < num;
      });
    },

相关文章

网友评论

      本文标题:element select 实现滚动加载

      本文链接:https://www.haomeiwen.com/subject/dnjbihtx.html