項目場景：

在公司管理后臺需要有一個 根據選擇客戶篩選擁有的服務 的功能

問題描述：

但是有上千條用戶數據，一次性查詢加載會導致頁面有很長時間（大概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 下拉分页加载数据，并支持搜索功能（此处不支持分页）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。