Select下拉框滚动分页

135 阅读1分钟

使用的是vue3,element-plus

模版调用 主要是 v-loadMore="handleScroll",在handleScroll里去写自己的请求方法

	<el-select
						v-model="form.diagnosisName"
						v-loadMore="handleScroll"
						filterable
						clearable
						reserve-keyword
						placeholder="请输入搜索相关内容"
						:loading="loading"
						style="width: 400px"
						popper-class="loadmore"
						@change="onChange"
					>

添加指令

```import type { App } from 'vue'
import store from '@/store'

export function loadMore(app: App) {
	app.directive('loadMore', {
		mounted(el, binding) {
			// 获取 .el-select-dropdown__wrap 元素
			const dropdownWrapElements = document.querySelectorAll(
				'.el-select-dropdown .el-select-dropdown__wrap'
			)

			// 假设我们知道要监听的是第二个元素
			const dropdownWrapElement = dropdownWrapElements[1]
			console.log(dropdownWrapElement, 'dropdownWrapElementsdropdownWrapElements')
			// 添加滚动监听器
			dropdownWrapElement.addEventListener('scroll', e => {
				const target = e.target as HTMLElement

				if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
					// 调用绑定的方法来加载更多数据
					binding.value()
				}
			})
		}
	})
`}`