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

  • 相关阅读:
    [BJWC2018]Border 的四种求法
    [51nod1847]奇怪的数学题
    [51nod1965]奇怪的式子
    [BZOJ3283]运算器
    [TJOI2015]概率论
    [SDOI2017]遗忘的集合
    [HDU5709]Claris Loves Painting
    [Atcoder AGC032C]Three Circuits
    [Atcoder ARC103D]Robot Arms
    [Atcoder AGC030C]Coloring Torus
  • 原文地址:https://www.cnblogs.com/llcdbk/p/12868784.html
Copyright © 2020-2023  润新知