目錄思路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 加載更多功能內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！