项目场景：

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

问题描述：

但是有上千条用户数据，一次性查询加载会导致页面有很长时间（大概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 下拉分页加载数据，并支持搜索功能（此处不支持分页）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。