有時候select里面的數據會很多，這時候就需要分頁，那么我們如何監聽select觸底呢？
這時候我們就要寫一個自定義指令，然后在main.js中注冊，這個寫兩個版本，vue2.x和vue3
v-load-more=‘loadMore’
vue2.x
在src或者你項目的其他目錄下面創建一個directives文件，然后在里面新建一個loadmore.js
如果對自定義指令還不熟悉可以先看vue2.x自定義指令
這時候線打印bind中參數出來看看

export default {bind(el, binding) {console.log(el)console.log(binding)}, }

在相同的目錄下面新增一個index.js用來管理自定義指令的注冊

import loadMore from './loadmore' const directives = {loadMore, }export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key])})}, }

在main.js中引入并通過vue.use注冊全局自定義指令

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

這時候在看看loadmore.js中打印出來的值,發現select下拉框就在el里面

那我們就可以通過querySelector來獲取下拉框的dom,監聽里面的滾動條位置，一下是loadmore.js中完整代碼

export default {bind(el, binding) {const dropdownDom = el.querySelector('.el-select-dropdown__wrap')dropdownDom.addEventListener('scroll', function () {const condition = this.scrollHeight - this.scrollTop <= this.clientHeightif (condition) {binding.value && binding.value()}})}, }

使用的使用直接v-load-more就好了

<el-select v-model="value" placeholder="請選擇" v-load-more="loadMore"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>methods: {loadMore(){console.log('到底了')} }

vue3.0
目錄創建文件與vue2.x描述是一樣的，這里就不重復了，自定義指令在vue3.0中鉤子函數都改變了
具體看官網vue3.0自定義指令
index.js中的注冊方法vue2x和vue3.0一樣，可以看上面
loadmore.js

export default {beforeMount(el, binding) {console.log(el)}, }

按照慣例，我們先打印出el看看下拉框在不在el里面，這時候發現下拉框并不在select中，而是在body下面

那么我們只能通過設置select屬性中的popper-class才能獲取到對應的下拉框
使用方法 v-load-more:[name]動態傳參

<el-select:model-value="modelValue"class="m-2"placeholder="Select"@change="changeValue":popper-class="item.popperClass"v-load-more:[item.popperClass]="loadMore" ><el-optionv-for="item in item.options":key="item.value":label="item.label":value="item.value"/> </el-select> <script setup>const loadMore = () => {console.log('到底了')} </script>

完整的loadmore.js

export default {beforeMount(el, binding) {if (!binding.arg) returnconst selectDom = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`)function loadmore() {const isBase = this.scrollHeight - this.scrollTop <= this.clientHeightif (isBase) {binding.value && binding.value()}}el.selectDomInfo = selectDomel.userloadmore = loadmoreselectDom.addEventListener('scroll', loadmore)},beforeUnmount(el) {if(el.userloadmore) {el.selectDomInfo.removeEventListener('scroll', el.userloadmore)delete el.selectDomInfodelete el.userloadmore}} }

總結

以上是生活随笔為你收集整理的vue element select 下拉加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。

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