首页 > 其他 > 详细

element ui 下拉框加载事件写法

时间:2020-05-11 14:58:51      阅读:124      评论:0      收藏:0      [点我收藏+]

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

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条去加载的,方案可行

element ui 下拉框加载事件写法

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!