vue3+el-select实现触底加载更多功能(ts版)

目录思路main.tshome.vue思路

使用全局指令来实现触底加载功能

通过el-select中的popper-class给下拉框加入一个类名

在src下的utils文件夹中创建selectLoadMoreDirective.ts文件

import { Directive, DirectiveBinding } from 'vue'const loadMore: Directive = { beforeMount(el: any, binding: DirectiveBinding) { console.log(el) const selectDom = (document.querySelector('.more_select_dropdown') as any).querySelector('.el-select-dropdown .el-select-dropdown__wrap'); console.log(selectDom, 'selectDom++++++++++++++'); function loadMores(this: any) { const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight if (isBase) {binding.value && binding.value() } } el.selectDomInfo = selectDom el.userLoadMore = loadMores nextTick(() => { selectDom?.addEventListener('scroll', loadMores) }) }, beforeUnmount(el: any) { if (el.userLoadMore) { el.selectDomInfo.removeEventListener('scroll', el.userLoadMore) delete el.selectDomInfo delete el.userLoadMore } }}export default loadMoremain.tsimport { createApp } from 'vue'import App from './App.vue'import router from '/@/router'import loadMore from '@/utils/selectLoadMoreDirective'const app = createApp(App)app.use(router)app.directive('loadMore', loadMore)home.vue<template> <div class='p-2'> <el-select v-model='selectedValue' v-loadMore='loadMore' popper- @change='selectChange'> <el-option v-for='(item, index) in list' :key='`${item.value}${index}`' :label='item.label' :value='item.value' /> </el-select> </div></template><script setup name='Home' lang='ts'>import { ComponentInternalInstance, computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';const selectedValue = ref([])const selectData = reactive({ pageIndex: 1, pageSize: 5, finished: false})const list = ref([ { value: 1, label: '测试1' }, { value: 2, label: '测试2' }, { value: 3, label: '测试3' }, { value: 4, label: '测试4' }, { value: 5, label: '测试5' }, { value: 6, label: '测试6' }, { value: 7, label: '测试7' }, { value: 8, label: '测试8' },])//触底函数const loadMore = () => { console.log(' 触底了'); // 防抖处理 setTimeout(() => { if (selectData.finished) return //值为true，则代表没有数据了 selectData.pageIndex += 1 // list.value = list.value.concat(list2.value) for (let i = 1; i <= 8; i++) { list.value.push({value: i,label: `测试${i}` }) } }, 500)}//选中值发生变化时触发const selectChange = () => { console.log('选中的xxxx')}</script>

到此这篇关于vue3+el-select实现触底加载更多功能的文章就介绍到这了,更多相关vue3+el-select 加载更多功能内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！