在Element UI中，可以通過監(jiān)聽select下拉框的visible-change事件來實現(xiàn)觸底加載下一頁的效果。

方式一：利用elementUi的事件

具體步驟如下：

1. 首先，在select組件中設(shè)置：@visible-change="handleVisibleChange" ref="mySelect"
2. 在data中定義一個變量pageNum，用于記錄當前加載的頁碼：pageNum: 1,
3. 在methods中定義一個函數(shù)handleVisibleChange，用于監(jiān)聽下拉框的顯示和隱藏變化：

handleVisibleChange(visible) {
  if (visible) {
    // 如果下拉框顯示
    const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
    // 監(jiān)聽下拉框滾動事件
    selectDropdown.addEventListener('scroll', this.loadNextPage);
  } else {
    // 如果下拉框隱藏
    const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
    // 移除下拉框滾動事件監(jiān)聽
    selectDropdown.removeEventListener('scroll', this.loadNextPage);
  }
},

1. 在methods中定義一個函數(shù)loadNextPage，用于加載下一頁的數(shù)據(jù)：

loadNextPage() {
  const selectDropdown = document.querySelector('.el-select-dropdown__wrap');
  // 判斷下拉框是否觸底
  if (selectDropdown.scrollTop + selectDropdown.offsetHeight >= selectDropdown.scrollHeight) {
    // 觸底加載下一頁數(shù)據(jù)
    this.pageNum++;
    // 調(diào)用接口請求下一頁數(shù)據(jù)
    // ...
  }
},

方式二：使用自定義指令

首先，這個問題?需要我們寫一個自定義指令來監(jiān)?聽一下select下拉框的scroll事件，這個是第一步，

第一步：新建一個select.js文件。具體代碼如下：

第二步：在main.js文件中引入即可。當然引入有兩種引入方式，下面來介紹一下。

1、第一種引入方式 （這種方式是項目中還有其他的自定義指令，不行全部拿過來），這個引入方式就是上面我那種直接 export? default? 直接暴露出去的寫法即可

import directives from '@/assets/js/directives'
 
Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})

2、第二種引入方式 。?是直接寫個vue文件 ，引入vue, Vue.directive(? )在里面書寫代碼，這種方式的引入如下：

import Directives from './directives/index'
 
Vue.use(Directives)

通過以上步驟，我們就可以實現(xiàn)當下拉框觸底時自動加載下一頁數(shù)據(jù)的效果。你可以根據(jù)自己的需求，調(diào)用相應(yīng)的接口請求下一頁數(shù)據(jù)并展示到下拉框中。文章來源地址http://www.zghlxwxcb.cn/news/detail-632312.html

到了這里，關(guān)于elementUi select下拉框觸底加載異步分頁數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！