项目场景：

在公司管理后台需要有一个根据选择客户筛选拥有的服务的功能

问题描述：

但是有上千条用户数据，一次性查询加载会导致页面有很长时间（大概4~5s）的空白期，用户体验很不友好。
故需要进行优化，针对这个问题，网上解决方案也挺多的，此处参考 https://juejin.cn/post/6844903710972182536 解决方案，根据项目做了部分减配

解决方案：

一方面优化MySQL查询语句，另一方面前端分页查询数据。
本文主要讲述如何修改 ElementUI 的el-select 组件支持分页查询数据

定义指令

# directives/index.jsimport Vue from 'vue'
export default () => {Vue.directive('el-select-scroll', {bind(el, binding) {// 获取滚动页面DOMlet SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')let scrollPosition = 0SCROLL_DOM.addEventListener('scroll', function () {// 当前的滚动位置 减去  上一次的滚动位置// 如果为true则代表向上滚动，false代表向下滚动let flagToDirection = this.scrollTop - scrollPosition > 0// console.log(flagToDirection ? '滚动方向：下' : '滚动方向：上')// 记录当前的滚动位置scrollPosition = this.scrollTop// 记录滚动位置距离底部的位置,在滚动位置距离滚动页面底部一定高度时在触发，例如距页面底部只有100px时触发handleScroll事件const LIMIT_BOTTOM = 10let scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) < LIMIT_BOTTOM// 如果已达到指定位置则触发// 如果向下滚动 并且距离底部只有10pxif (flagToDirection && scrollBottom) {// 将滚动行为告诉组件binding.value(flagToDirection)}// 如果是向上滚动  并且距离顶部只有100pxif (!flagToDirection && this.scrollTop < LIMIT_BOTTOM) {binding.value(flagToDirection)}})}})
}

vue中引入指令

# app.jsimport directive from "./directives";
Vue.use(directive)

el-select 加入新指令 el-select-scroll

<template><el-select v-model="searchForm.user_id" v-el-select-scroll="handleScroll" size="mini" :loading="loadStatus" :placeholder="placeholder" value-key="id" @focus="handleFocus"># 搜索框<el-input type="text" size="mini" v-model="queryKeyword" @keydown.enter.native="remoteSearch" placeholder="回车搜索客户，按字母排序"></el-input># 下拉列表数据<el-option v-for="(el,key) in ownUserList" :key="key" :label="formatLabel(el)" :value="el.id"></el-option></el-select></template><script>
export default {name: "app-selectOwnUser",data() {return {searchForm: { user_id: "" },ownUserList: [],loadStatus: false,pageNum: 1,queryKeyword: "",};},methods: {ajaxGetInfo(pageNum = this.pageNum){this.loadStatus = truelet params = {page: pageNum}get("api/user/lists", params).then(res => {this.loadStatus = falseif (res.errcode) {this.$message({showClose: true,message: res.msg,type: "error"});return false;}this.ownUserList = this.ownUserList.concat(res.data);});},handleFocus(){/*** select 获取焦点时，重置参数*  */this.queryKeyword = "";this.ownUserList = [];this.ajaxGetInfo(1);},handleScroll(param){/** 处理滚动行为* param: 滚动行为*  true 向下滚动*  false 向上滚动*/// console.log(param)// 此处判断 !this.queryKeyword 是防止在搜索关键词的结果上追加数据// 在后台判断关键词长度，至少要输入2个关键字，才可搜索// 否则，还是会出现查询时间长的情况if(param && !this.queryKeyword){// 请求下一页数据this.ajaxGetInfo(++this.pageNum)}},remoteSearch(){let params={keyword: this.queryKeyword}this.loadStatus = trueget("api/user/lists", params).then(res => {this.loadStatus = falseif (res.errcode) {this.$message({showClose: true,message: res.msg,type: "error"});return false;}this.ownUserList = res.data;});},}
}
</script>

【Vue】ElementUI el-select 下拉分页加载数据，并支持搜索功能（此处不支持分页）相关推荐

html 微博下拉菜单,jQuery实现模仿微博下拉滚动条加载数据效果
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: 滚动条距离底部 $(function () { var i = 4; $(window).bind(&q ...
新增书籍类别下拉框加载、书籍上下架功能
课程内容: 1.新增书籍 2.上架书籍 3.下架书籍一.新增页面书籍类别下拉框加载 1.根据下拉框类型写实体类 2.查询所有类型的方法(CategoryDao) package com.zxy.da ...
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...
【基于vue写的select下拉框】
一个基于vue写的select下拉框 <template><div class="selectCompents"><div class="s ...
怎么样给下拉框加载背景色
选择自 PPLUNCLE 的 Blog 部分代码: ------aspx页面: <tr> <td><select id="job" name=&q ...
新增书籍类别，下拉框加载，书籍上下架操作
一.新增页面书籍类别下拉框加载 1.查询所有类型的方法(CategoryDao) package com.xly.dao;import java.util.List;import com.xly.en ...
select下拉框动态获取数据
需求:select下拉框中的数据是从后台接口中获取的,而不是自己写的假数据步骤:(这里是用jquery及ajax发送请求) 一.页面上导入jquery在线资源二.代码实列如下(仅供参考) < ...
List 分页加载数据控制机制
分页加载是一种应用很广泛的数据展示控制机制,相信绝大多数开发者对于这一套机制都非常熟悉.这篇文章的主要目的结合实际的使用场景,对以往在开发中遇到一些概念进行梳理,归纳的同时加深理解,也希望能帮助更多刚 ...
微信小程序数据拼接_最佳方式实现微信小程序分页加载数据
一般小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面.这样的确可以实现分页加载数 ...
微信小程序实现分页加载数据
实现分页加载数据要用到页面加载触底事件 onReachBottom: function () { } 首先在 js 定义初始数据 data: { //用来接收后端数据list:[], //当前页cur ...

【Vue】ElementUI el-select 下拉分页加载数据，并支持搜索功能（此处不支持分页）