目錄思路main.tshome.vue思路

使用全局指令來實現觸底加載功能

通過el-select中的popper-class給下拉框加入一個類名

在src下的utils文件夾中創(chuàng)建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)}//選中值發(fā)生變化時觸發(fā)const selectChange = () => { console.log('選中的xxxx')}</script>

到此這篇關于vue3+el-select實現觸底加載更多功能的文章就介紹到這了,更多相關vue3+el-select 加載更多功能內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！