快捷導(dǎo)航

Element-Plus Select組件實現(xiàn)滾動分頁加載功能

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

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

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

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

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

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

這樣做略顯麻煩，不夠靈活。那么有沒有辦法，不設(shè)置額外的popper-class來獲取到對應(yīng)的下拉列表的Dom元素呢？Element-Plus文檔并沒有相關(guān)獲取下拉列表Dom的相關(guān)屬性，并且在<el-select>渲染的Dom和下拉列表的Dom元素在審查代碼時也沒有發(fā)現(xiàn)明顯的關(guān)聯(lián)性。但通過對mounted周期調(diào)試，發(fā)現(xiàn)了埋藏深處的popperRef.contentRef正是我們要找的下拉列表的Dom，于是代碼可以這樣實現(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上，以便實例銷毀時進(jìn)行事件移除處理
    el._selectDom = selectDom;
    el._selectLoadMore = loadMores;
    // 監(jiān)聽滾動事件
    selectDom?.addEventListener('scroll', loadMores.bind(selectDom));
  },
  // 實例銷毀
  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)過簡單測試，上述代碼可以正常實現(xiàn)分頁。需要注意的是上述selectDom的獲取方式?jīng)]有經(jīng)過充分測試，只作為實驗性代碼。

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Element-Plus Select組件實現(xiàn)滾動分頁加載功能

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具