elementUI select远程搜索分页，实现滚动条下拉分页

骑猪看日落 2022-09-04 05:52 38阅读 0赞

template

<el-select v-model="form.userCode" v-el-select-loadmore="loadmore" filterable remote reserve-keyword :remote-method="userRemoteMethod" :loading="personLoading" >
      <el-option v-for="item in personOptions" :key="item.userCode" :label="item.phonenumber" :value="item.userCode" />
    </el-select>

methods

// 远程搜索
    userRemoteMethod(query) { 
      if (query !== '') { 
        this.personLoading = true;
        this.queryParams.phonenumber = query;
        this.queryParams.pageNum = 1;
        this.personOptions = [];
        this.getUserList();
      } else { 
        this.personOptions = [];
      }
    },
    // 调用接口查询数据
    getUserList() { 
      listAllUser(this.queryParams).then(response => { 
        this.personLoading = false;
        this.personOptions = [...this.personOptions, ...response.rows];
      });
    },
    // 远程搜索列表触底事件
    loadmore() { 
      this.queryParams.pageNum++;
      this.getUserList();
    },

main.js

import elementDirective from './directive';
    Vue.use(elementDirective);

directive.js

import elSelectLoadmore from './elSelectLoadmore';
    const install = function(Vue) { 
      Vue.directive('el-select-loadmore', elSelectLoadmore);
    };
    export default install;

elSelectLoadmore.js

export default { 
      inserted(el, binding, vnode) { 
        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();
          }
        });
      }
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI实现分页

分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，

左手的ㄟ右手/ 2023年01月13日 06:22/ 0 赞/ 210 阅读

相关 ElementUI 分页

一、概述当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。本次所使用

谁借莪１个温暖的怀抱￠/ 2023年01月11日 13:03/ 0 赞/ 208 阅读

相关 springboot + elementui 实现分页功能

目录后端前端后端 // num为当前页 size为每页个数 public Page<codesection> pageA

拼搏现实的明天。/ 2023年01月09日 01:08/ 0 赞/ 176 阅读

相关 elementUI实现分页

分页的两种方式。前端分页，后端分页前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数

我就是我/ 2022年12月11日 09:17/ 0 赞/ 219 阅读

相关 elementUI select远程搜索分页，实现滚动条下拉分页

template <el-select v-model="form.userCode" v-el-select-loadmore="loadmore" filtera

骑猪看日落/ 2022年09月04日 05:52/ 0 赞/ 39 阅读

相关 SSM框架——实现分页和搜索分页

分页是JAVA WEB项目常用的功能，昨天在Spring MVC中实现了简单的分页操作和搜索分页，在此记录一下。使用的框架为（MyBatis+SpringMVC

本是古典何须时尚/ 2022年08月27日 07:59/ 0 赞/ 259 阅读

相关 SSM框架——实现分页和搜索分页

分页是[Java ][Java]WEB项目常用的功能，昨天在[spring][] MVC中实现了简单的分页操作和搜索分页，在此记录一下。使用的框架为（MyBat

迷南。/ 2022年07月05日 15:26/ 0 赞/ 255 阅读

相关滚动下拉简单实现分页

1. 需要分页的jsp页面添加滚动下拉触发事件 <%@ page language="java" contentType="text/html; charset=UTF-8

淡淡的烟草味﹌/ 2022年03月25日 14:52/ 0 赞/ 422 阅读

相关 elementUI实现前端分页

　　按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((c

╰+攻爆jí腚メ/ 2021年12月23日 16:17/ 0 赞/ 344 阅读

相关 vue 前端滚动条分页

转载地址：[https://blog.csdn.net/ColourfulTiger/article/details/80708873][https_blog.csdn.net

骑猪看日落/ 2021年10月23日 22:52/ 0 赞/ 428 阅读