快捷導(dǎo)航

Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載功能

更新時(shí)間：2024年03月19日 09:54:22 作者：曉風(fēng)伴月

Element-Plus的select組件并沒(méi)有自帶滾動(dòng)分頁(yè)加載的功能,其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁(yè)及下一頁(yè)操作按鈕的方式進(jìn)行分頁(yè)加載切換,這篇文章主要介紹了Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載功能,需要的朋友可以參考下

Element-Plus的select組件并沒(méi)有自帶滾動(dòng)分頁(yè)加載的功能，其雖然提供了自定義下拉菜單的底部的方式可以自定義上一頁(yè)及下一頁(yè)操作按鈕的方式進(jìn)行分頁(yè)加載切換：

但如果不想通過(guò)點(diǎn)擊分頁(yè)按鈕的方式，利用滾動(dòng)觸底進(jìn)行下一頁(yè)加載的話，可以利用Vue自定義指令實(shí)現(xiàn)：

自定義指定的實(shí)現(xiàn)方式，在網(wǎng)絡(luò)上已經(jīng)有實(shí)現(xiàn)的代碼了，只不過(guò)需要在<el-select>上添加指定的popper-class（比如：popper-class=“single-select-loadmore”）,這樣做主要是因?yàn)?code><el-select>默認(rèn)是將下拉列表插入至 body 元素（teleported=true）,為了獲取下拉列表的實(shí)際Dom對(duì)象而額外添加了popper-class：

 const selectDom = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap')

這樣做略顯麻煩，不夠靈活。那么有沒(méi)有辦法，不設(shè)置額外的popper-class來(lái)獲取到對(duì)應(yīng)的下拉列表的Dom元素呢？Element-Plus文檔并沒(méi)有相關(guān)獲取下拉列表Dom的相關(guān)屬性，并且在<el-select>渲染的Dom和下拉列表的Dom元素在審查代碼時(shí)也沒(méi)有發(fā)現(xiàn)明顯的關(guān)聯(lián)性。但通過(guò)對(duì)mounted周期調(diào)試，發(fā)現(xiàn)了埋藏深處的popperRef.contentRef正是我們要找的下拉列表的Dom，于是代碼可以這樣實(shí)現(xiàn)：

// src/directive/elSelectLoadMore.js
export default {
  mounted(el, binding, vnode) {
    const selectDom = vnode.children[0].component.refs.popperRef.contentRef.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    function loadMores() {
      // 判斷是否到底
      const isBottom = this.scrollHeight - this.scrollTop <= this.clientHeight;
      if (isBottom) {
        // 執(zhí)行事件回調(diào)
        binding.value && binding.value();
      }
    }
    // 將獲取到的dom和函數(shù)掛載到el-select上，以便實(shí)例銷毀時(shí)進(jìn)行事件移除處理
    el._selectDom = selectDom;
    el._selectLoadMore = loadMores;
    // 監(jiān)聽滾動(dòng)事件
    selectDom?.addEventListener('scroll', loadMores.bind(selectDom));
  },
  // 實(shí)例銷毀
  beforeUnmount(el) {
    if (el._selectLoadMore) {
      el._selectDom.removeEventListener('scroll', el._selectLoadMore);
      delete el._selectDom;
      delete el._selectLoadMore;
    }
  }
}

// src/directive/index.js
import elSelectLoadMore from './common/elSelectLoadMore'
export default function directive(app){
  app.directive('selectLoadmore', elSelectLoadMore)
}

// src/main.js
import App from './App'
import directive from './directive'
const app = createApp(App)
directive(app)

經(jīng)過(guò)簡(jiǎn)單測(cè)試，上述代碼可以正常實(shí)現(xiàn)分頁(yè)。需要注意的是上述selectDom的獲取方式?jīng)]有經(jīng)過(guò)充分測(cè)試，只作為實(shí)驗(yàn)性代碼。

到此這篇關(guān)于Element-Plus Select組件實(shí)現(xiàn)滾動(dòng)分頁(yè)加載的文章就介紹到這了,更多相關(guān)Element-Plus Select滾動(dòng)分頁(yè)加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: