el-select 加载更多

import { Directive, DirectiveBinding } from 'vue'
const loadMore: Directive = {
	beforeMount(el: any, binding: DirectiveBinding) {
		const selectDom = (
			document.querySelectorAll('.more_select_dropdown1')[0] as any
		).querySelector('.el-select-dropdown .el-select-dropdown__wrap')
	
		
		const selectDom1 = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap');
		const selectDom2 = document.querySelector('.single-select-loadmore2 .el-select-dropdown__wrap');

		function loadMores(this: any) {
			const isBase =
				this.scrollHeight - this.scrollTop - 10 <= this.clientHeight
			console.log(
				'ddd',document.querySelectorAll('.more_select_dropdown'),
				this.scrollHeight - this.scrollTop <= this.clientHeight,
				this.scrollHeight,
				this.scrollTop,
				this.clientHeight,
			)
			if (isBase) {
				binding.value && binding.value()
			}
		}
		el.selectDomInfo = selectDom
		el.userLoadMore = loadMores
		nextTick(() => {
			selectDom?.addEventListener('scroll', loadMores)
			selectDom1?.addEventListener('scroll', loadMores)
			selectDom2?.addEventListener('scroll', loadMores)
		})
	},
	beforeUnmount(el: any) {
		if (el.userLoadMore) {
			el.selectDomInfo.removeEventListener('scroll', el.userLoadMore)
			delete el.selectDomInfo
			delete el.userLoadMore
		}
	},
}
export default loadMore

先创建一个js文件

再全局引用

<el-form-item label="公司服务:">
				<el-select v-if="picturelist.length"
					v-model="Card.companyServicesUrl"
					placeholder="请选择图片"
					multiple
					filterable
					remote
					reserve-keyword
					:remote-method="remoteMethod"
					:loading="loadings"
					v-loadMore="loadmore"
					class="more-select"
					popper-class="single-select-loadmore2"
				>
					<template #prefix>
						<span v-if="cselectall" @click="cselectallitem">
							点击全选
						</span>
						<span v-else @click="cselectall=true,Card.companyServicesUrl=[]">
							取消全选
						</span>
					</template>
					<el-option v-for="item in picturelist" :key="item.pictureUrl" :label="item.pictureUrl"
						:value="item.pictureUrl" style="height: 100px;border-bottom: 1px dashed gray;">
						<div class="flex items-center">
							
							<img :src="item.pictureUrl" style='width:200px;height: 100px;'>
                          <span >{{ item.label }}</span>
						</div>
					</el-option>
				
				</el-select>
				<div v-else>
					请先上传图片
				</div>