el-select 分页获取数据

//
<el-select    
    ref="selectNameRef"
	class="table-item"
	v-model="state.basicForm.userId"
	v-el-select-loadmore="loadmore"
	filterable
	remote
	reserve-keyword
	:remote-method="userRemoteMethod"
	:loading="state.loading"
	@focus="selectRealName"
	>
	<el-option v-for="item in state.personOptions" :key="item.id" :label="item.realName" :value="item.id" />
</el-select>

<script lang="ts" setup name="person-add">
import { ref, reactive} from 'vue';
import {    SysUser } from '/@/api-services/models';//personOptions数据类型定义
const state = reactive({
	loading: false,
    basicForm: {
	    userId: null,
    },
    queryParams: {
		page: 1,
		pageSize: 10,
		realName: undefined,
	},
	personOptions: [] as Array<SysUser>, //档案姓名select
})
// 远程搜索
const userRemoteMethod = (query: any) => {
	if (query !== '') {
		state.queryParams.realName = query;
		state.queryParams.page = 1;
		state.personOptions = [];
		getUserList();
	} else {
		state.personOptions = [];
	}
};
// 调用接口查询数据
const getUserList = async () => {
	state.loading = true;

	var res = await getAPI(SysUserApi);//调用SysUserApi接口获取select数据
	let data = res.data.result?.items ?? [];
	state.personOptions = [...data, ...state.personOptions];//合并接口数据
	state.loading = false;
};
// 远程搜索列表触底事件
const loadmore = () => {
	state.queryParams.page++;
	getUserList();
};
//初始化select
const selectRealName = () => {
	state.queryParams.page = 1;
	state.personOptions = [];
	getUserList();
};
</script>

> 自定义v-el-select-loadmore指令，实现下划select加载分页数据

在directive文件下创建elementLoadMore.ts文件

import type { App } from 'vue';
const install = function (app: App) {
	app.directive('el-select-loadmore', {
		mounted(el, binding) {
			el.addEventListener('scroll', () => {
				const condition = el.scrollHeight - el.scrollTop == el.clientHeight;
				if (condition) {
					binding.value();
				}
			});
		},
		unmounted(el) {
			el.removeEventListener('el-select-loadmore', () => {});
		},
	});
};
export default install;

 在 directive的index.ts文件里使用elementLoadMore导出的install方法

import type { App } from 'vue';
import elementDirective from './elementLoadMore';

 */
export function directive(app: App) {
	//下拉列表加载更多
	elementDirective(app);
}

main.ts中引入 directive

import { createApp } from 'vue';
import pinia from '/@/stores/index';
import App from '/@/App.vue';
import router from '/@/router';
import { directive } from '/@/directive/index';

const app = createApp(App);

directive(app);