vue+el-select 多数据分页搜索组件的实现

//子页面1
<template>
	<div>
		<el-select  :value="defaultValue" :loading="loading" :multiple="multiple" :placeholder="placeholder"
			:allow-create="allowCreate"   :isConcatShowText="isConcatShowText" filterable remote clearable default-first-option :remote-method="remoteMethod"
			style="width: 100%;" @input="handleInput" @visible-change="visibleChange" @change="change"
			@clear="clearChange">
			<el-option v-for="(item, index) in optionsList" :key="'s' + index" :label="isConcatShowText==true?concatenatedLabel2(item):concatenatedLabel(item)"
				:value="item[valueString]">
				{{ concatenatedLabel(item) }}
			</el-option>
			<el-pagination class="select-pagination" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page.sync="localCurrentPage" :page-size="pageSize"
				:total="total" layout="prev, pager, next, total"></el-pagination>
		</el-select>
	</div>
</template>

<script>
	export default {
		name: 'CustomSelect',
		props: {
			defaultValue: {
				type: [Number, String, Array],
				default: null
			},
			loading: {
				type: Boolean,
				default: false
			},
			拼接后 被选择后输入框是否显示拼接的字符串
			isConcatShowText:{
				type: Boolean,
				default: false
			},
			multiple: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: 'Please select'
			},
			allowCreate: {
				type: Boolean,
				default: false
			},
			remoteMethod: {
				type: Function,
				default: null
			},
			optionsList: {
				type: Array,
				default: () => []
			},
			label: {
				type: String,
				default: 'label'
			},
			labelTwo: {
				type: String,
				default: ''
			},
			labelThree: {
				type: String,
				default: ''
			},
			labelFour: {
				type: String,
				default: ''
			},
			valueString: {
				type: String,
				default: 'value'
			},
			currentPage: {
				type: Number,
				default: 1
			},
			pageSize: {
				type: Number,
				default: 10
			},
			total: {
				type: Number,
				default: 0
			},
		},
		watch: {
			// 监听 prop 的变化，并更新本地数据属性
			currentPage(newValue) {
				this.localCurrentPage = newValue;
			}
		},
		data() {
			return {
				localCurrentPage: 1
			}
		},
		methods: {
			handleInput(value) {
				this.$emit('input', value);
			},
			visibleChange(visible) {
				this.$emit('visible-change', visible);
			},
			change(value) {
				this.$emit('change', value);
			},
			clearChange() {
				this.$emit('clear');
			},
			handleSizeChange(size) {
				this.$emit('size-change', size);
			},
			handleCurrentChange(page) {
				this.$emit('current-change', page);
			},
			concatenatedLabel(item) {
				return [item[this.label], item[this.labelTwo], item[this.labelThree], item[this.labelFour]].filter(Boolean)
					.join(' || ');
			},
			concatenatedLabel2(item) {
				return item[this.label]
			}
		}
	};
</script>

<style scoped>
	.select-pagination {
		margin-top: 10px;
	}
</style>

<template>
	<!-- 所有的项目 也可以单独用这个页面 -->
	<div>
		<!-- is-concat 是否拼接字符串 concat-symbol拼接字符  allowCreate是否允许创建条目 默认显示多少条 是否多选  -->
		<projectSelect :defaultValue="selectedValue" :loading="isLoading" :multiple="isMultiple"
			:isConcatShowText="isConcatShowText" :placeholder="placeholder" :allowCreate="allowCreation"
			:remoteMethod="remoteFetch" :optionsList="options" label="projectCode" labelTwo="name" labelThree=""
			labelFour="" :valueString="valueString" :currentPage="currentPages" :pageSize="pageSize" :total="totalItems"
			@input="handleInput" @visible-change="handleVisibleChange" @change="handleChange" @clear="handleClear"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
</template>

<script>
	import projectSelect from './project.vue'; 
	//管理员查看往来单位
	import {
		listInfo
	} from "@/api/project/index.js"; //客户
	export default {
		name: 'ParentComponent',
		components: {
			projectSelect
		},
		props: {
			index: {
				type: Number,
				default: 0
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			valueString: {
				type: String,
				default: 'id'
			},
			selectedVal: {
				default: null
			}
		},
		watch: {
			selectedVal: {
				handler(val, oldVal) {
					this.selectedValue = val
				},
				immediate: true,//为要监视的prop添加immediate属性并设置为true，可以使得watch函数在组件创建时立即执行一次
				deep: true
			}
		},
		data() {
			return {
				querySearch:null,
				isConcatShowText: true, //拼接后 被选择后输入框是否显示拼接的字符串
				selectedValue: [], // 如果是多选，则为数组；否则为单个值
				isLoading: false,
				isMultiple: false, // 是否允许多选
				allowCreation: false, // 是否允许用户创建新选项
				options: [], // 选项列表，应从服务器或本地获取
				currentPages: 1, // 当前页码
				pageSize: 6, // 每页显示的数量
				totalItems: 0, // 总项目数，用于分页
			};
		},
		mounted() {
			this.remoteFetch()
		},
		methods: {
			remoteFetch(query) {
				if(query){
					this.querySearch=query
				}
				let that = this
				// 远程获取数据的函数，根据 query 参数进行搜索
				this.isLoading = true;
				// 假设 fetchData 是一个从服务器获取数据的函数
				listInfo({
					isStop:0,//0否 1是 是否停用
					search: this.querySearch,
					pageSize: that.pageSize,
					pageNum: that.currentPages
				}).then(response => {
					//每次进入后  数据都是重新填充
					if (response.rows.length < 1) {
						this.selectedValue = []; // 清空已选值
					}
					that.options = response.rows;
					that.totalItems = response.total;
					this.isLoading = false;
				});
			},
			handleInput(value) {
				// 处理输入事件，更新 selectedValue
				this.selectedValue = value;
				this.$emit('handleInput', value);
			},
			handleVisibleChange(visible) {
				// 处理下拉菜单的可见性变化
				this.currentPages = 1;
				this.remoteFetch(); // 可能需要重新获取当前页的数据
			},
			handleChange(value) {
				this.querySearch=null
				// 处理选项变化事件
				this.$emit('handlePageChange', value);
			},
			handleClear() {
				this.querySearch=null
				// 处理清除事件
				this.selectedValue = []; // 清空已选值
				this.$emit('clear', this.index);
				// this.$parent.productClear(this.index)
			},
			handleSizeChange(size) {
				// 处理每页显示数量变化事件
				this.pageSize = size;
				this.remoteFetch(this.querySearch); // 可能需要重新获取当前页的数据
			},
			handleCurrentChange(page) {
				// 处理当前页码变化事件
				this.currentPages = page;
				this.remoteFetch(this.querySearch); // 获取当前页的数据
			}
		},
		// 其他逻辑和生命周期钩子...
	};
</script>

<style scoped>
	/* 父组件的样式 */
</style>

<el-form>
   <el-form-item label="项目" prop="projectName">
			<project-select class="width100bfb" valueString="id" :selectedVal="form.projectName"   @clear='projectClear()' @handlePageChange="projectChange($event)" placeholder="请选择项目" />
	</el-form-item>
</el-form>

<script>
import projectSelect from '@/views/components/elSelect/projectParent'
export default {
components: {
			projectSelect
		},
methods: {
/**项目列表change*/
			projectChange(val) {
				if (val) {
				//根据自己情况去调用接口
					//getProjectInfo(val).then(res => {
					//	this.form.projectName = res.data.name
						
					//})
				}
			},
		/*清除项目**/
			projectClear() {
			//根据自己情况去设置
				//this.form.projectName = null
			},
 }
}
</script>