多选框触底加载+搜索功能

最新推荐文章于 2025-12-12 12:36:47 发布

原创最新推荐文章于 2025-12-12 12:36:47 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

//自定义指令 
directives: {
    loadmore: {
      inserted(el, binding) {
        const dom = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        dom.addEventListener("scroll", function (e) {
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },

  <el-select v-model="form.vul" v-loadmore="LoadMore" multiple filterable remote 
          :remote-method="remoteMethod" :options="loopholeList" class="width" @visible-change="visibleChange">
            <div v-if="loopholeList.length < total" style="text-align: center;"><i class="el-icon-loading"></i></div>
        </el-select>

 remoteMethod(query) {
      if (query) {
        //搜索逻辑
      }
    },
LoadMore() {
      if (this.loopholeList.length < this.total) {
       
        this.pageNum += 1
//调接口
      }
    },

 visibleChange(visible) {
     
    },