vue實現(xiàn)el-select 觸底分頁+遠程搜索的示例

更新時間：2023年12月19日 11:10:33 作者：前端初見

有的時候數(shù)據(jù)量比較大,比如幾千甚至上萬條的時候,如果直接賦值,整個頁面的 dom 會被撐爆,本文主要介紹了vue實現(xiàn)el-select 觸底分頁+遠程搜索的示例,具有一定的參考價值,感興趣的可以了解一下

前言

大部分情況下使用 el-select 的時候，el-options 中 options 的值都是后端接口給的數(shù)據(jù)，直接賦值就可以了。但是有的時候數(shù)據(jù)量比較大，比如幾千甚至上萬條的時候，如果直接賦值，整個頁面的 dom 會被撐爆，不僅請求全量數(shù)據(jù)接口的時候時間會很久，而且賦值完之后整個頁面會非?？?。
解決方案:

后端將接口改為分頁的、前端將el-select下拉框中的數(shù)據(jù)改為滾動加載
后端將接口改為模糊搜索的形式，通過選擇器中輸入的內(nèi)容去搜索模糊匹配的數(shù)據(jù)然后返回；前端使用 elementUI 中el-select的遠程搜索
我們可以實現(xiàn)一個Vue的自定義指令，每當使用el-select滾動到列表底部的時候就請求下一頁數(shù)據(jù)，來達到下拉滾動加載更多的目的。

一、el-select 觸底分頁+遠程搜索

觸底分頁

在這里插入圖片描述

遠程搜索

在這里插入圖片描述

1.封裝觸底自定義指令

src目錄下創(chuàng)建 select.js，并在main.js中全局引入
代碼主要是實現(xiàn)一個el-select下拉加載的自定義指令v-loadmore：

import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 獲取element-ui定義好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector(
        '.el-select-dropdown .el-select-dropdown__wrap'
      )
      SELECTDOWN_DOM.addEventListener('scroll', function () {
        const CONDITION =
          this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    },
  })
}

代碼說明：

document.querySelector：querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。
Element.scrollHeight：在不使用滾動條的情況下為了適應視口中所用內(nèi)容所需的最小高度（只讀）
Element.scrollTop：獲取或設置一個元素的內(nèi)容垂直滾動的像素數(shù)。
Element.clientHeight：讀取元素的可見高度（只讀）。
元素滾動到底，下面等式返回true，沒有則返回false。
警告：在使用顯示比例縮放的系統(tǒng)上，scrollTop可能會提供一個小數(shù)。

2.在 mian.js 引入封裝好的自定義指令

在項目中全局注冊v-loadmore指令

import loadMore from './plugins/select'
Vue.use(loadMore)

3.在組件中進行使用

最后在組件el-select中使用該指令

html部分

<el-form-item label="關聯(lián)案件:">
  <el-select
    v-model="searchParams.caseCode"
    v-loadmore="handleScroll"
    filterable
    remote
    :remote-method="remoteMethod"
  >
    <el-option
      v-for="item in ajList"
      :key="item.caseCode"
      :label="item.caseName"
      :value="item.caseCode"
    >
    </el-option>
  </el-select>
</el-form-item>

js部分

export default {
  data() {
    return {
      slectloading: false, //搜索下拉菜單
      ajList: [], //案件數(shù)據(jù)
      total: 0, //案件所有總數(shù)(接口返回)
      dqajtotal: 0, //當前案件總數(shù)(每次存儲的長度)
    }
  },
  created() {
    this.getajnewlist() //獲取案件
  },
  methods: {
    handleScroll() {
      console.log('觸底了')
      console.log(this.dqajtotal, this.ajtotal)
      if (this.ajList.length < this.ajtotal) {
        this.slectloading = true
        this.getajnewlist() //獲取案件方法
        this.slectloading = false
      }
    },
    // 獲取案件
    getajnewlist() {
      this.selectfy.page = this.selectfy.page + 1
      console.log('頁碼', this.selectfy.page)
      this.$axios({
        url: 'case/list',
        method: 'GET',
        params: this.selectfy,
      }).then((res) => {
        if (res.code === 2000 && res.data) {
          console.log('獲取成功')
          this.ajtotal = res.data.total
          if (res.data.records && res.data.records.length > 0) {
            res.data.records.forEach((ele) => {
              var idx = this.ajList.findIndex((item) => {
                return item.caseId == ele.caseId
              })
              if (idx == -1) {
                this.ajList.push(ele)
              }
            })
          }
        } else {
          console.log(res.resultStr)
        }
        console.log(res)
      })
    },
    // 關聯(lián)案件下拉菜單遠程搜索
    remoteMethod(val) {
      console.log('遠程搜索', val)
      if (val && val.length > 0) {
        // 有內(nèi)容
        this.slectloading = true
        this.$axios({
          url: 'case/list',
          method: 'GET',
          params: {
            size: 10,
            caseName: val,
          },
        }).then((res) => {
          console.log('遠程搜索', res)
          this.ajList = res.data.records //案件信息
          this.slectloading = false
        })
      } else {
        this.slectloading = true
        this.$axios({
          url: 'case/list',
          method: 'GET',
          params: {
            size: 10,
          },
        }).then((res) => {
          console.log(res)
          console.log('遠程搜索', res)
          this.ajList = res.data.records //案件信息
          this.slectloading = false
        })
      }
    },
  },
}

4.注意

傳入的數(shù)組個數(shù)必須大于或者等于8個選項時才能讓el-select組件出現(xiàn)下拉滾動。
列表里不存在滾動時，無法觸發(fā)傳入指令的函數(shù)。
未對 el-select 的其他參數(shù)做過多支持，如需支持，在不影響已有實例的使用的情況下，請直接修改組件源碼增加可選的 prop 參數(shù)即可
當然，在項目中遇到某些固定的加載請求時，我們也可以對該組件進行再次封裝，具體可以根據(jù)自身的業(yè)務需求進行修改。