vue element select 下拉加载更多

有时候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 下拉加载更多的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。