vue+el-select Implementation of Multi-Data Pagination Search Component

//Subpage 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" :="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
			},
			After splicing After being selected, the input box displays the spliced ​​string.
			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: {
			// Listen to the changes in prop and update the local data properties			currentPage(newValue) {
				 = 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[], item[], item[], item[]].filter(Boolean)
					.join(' || ');
			},
			concatenatedLabel2(item) {
				return item[]
			}
		}
	};
</script>

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

<template>
	<!-- All projects You can also use this page separately -->
	<div>
		<!-- is-concat Whether to splice strings concat-symbolSpliced ​​characters  allowCreateWhether to allow creation of entries How many pieces are displayed by default Whether to choose multiple choices  -->
		<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 './'; 
	//Administrator checks the contact units	import {
		listInfo
	} from "@/api/project/"; //client	export default {
		name: 'ParentComponent',
		components: {
			projectSelect
		},
		props: {
			index: {
				type: Number,
				default: 0
			},
			placeholder: {
				type: String,
				default: 'Please select'
			},
			valueString: {
				type: String,
				default: 'id'
			},
			selectedVal: {
				default: null
			}
		},
		watch: {
			selectedVal: {
				handler(val, oldVal) {
					 = val
				},
				immediate: true,//Add an immediate attribute to the prop to be monitored and set to true, so that the watch function can be executed immediately when the component is created				deep: true
			}
		},
		data() {
			return {
				querySearch:null,
				isConcatShowText: true, //After splicing, after being selected, whether the spliced ​​string is displayed in the input box after the splicing box is displayed.				selectedValue: [], // If it is multiple selection, it is an array; otherwise it is a single value				isLoading: false,
				isMultiple: false, // Is multiple selection allowed				allowCreation: false, // Whether to allow users to create new options				options: [], // List of options, which should be obtained from the server or locally				currentPages: 1, // Current page number				pageSize: 6, // The number of displayed per page				totalItems: 0, // Total number of items, used for paging			};
		},
		mounted() {
			()
		},
		methods: {
			remoteFetch(query) {
				if(query){
					=query
				}
				let that = this
				// Functions that remotely obtain data and search according to query parameters				 = true;
				// Suppose fetchData is a function that gets data from the server				listInfo({
					isStop:0,//0 No 1 Yes Whether to disable					search: ,
					pageSize: ,
					pageNum: 
				}).then(response => {
					//After each entry, the data is refilled					if ( < 1) {
						 = []; // Clear selected values					}
					 = ;
					 = ;
					 = false;
				});
			},
			handleInput(value) {
				// Process input events and update selectedValue				 = value;
				this.$emit('handleInput', value);
			},
			handleVisibleChange(visible) {
				// Handle visibility changes in the drop-down menu				 = 1;
				(); // You may need to re-get the data of the current page			},
			handleChange(value) {
				=null
				// Handle option change events				this.$emit('handlePageChange', value);
			},
			handleClear() {
				=null
				// Handle clearing events				 = []; // Clear selected values				this.$emit('clear', );
				// this.$()
			},
			handleSizeChange(size) {
				// Handle events for displaying the number of changes per page				 = size;
				(); // You may need to re-get the data of the current page			},
			handleCurrentChange(page) {
				// Handle the current page number change event				 = page;
				(); // Get the data of the current page			}
		},
		// Other logic and life cycle hooks...	};
</script>

<style scoped>
	/* Style of parent component */
</style>

<el-form>
   <el-form-item label="project" prop="projectName">
			<project-select class="width100bfb" valueString="id" :selectedVal=""   @clear='projectClear()' @handlePageChange="projectChange($event)" placeholder="Please select a project" />
	</el-form-item>
</el-form>

<script>
import projectSelect from '@/views/components/elSelect/projectParent'
export default {
components: {
			projectSelect
		},
methods: {
/**Project list change*/
			projectChange(val) {
				if (val) {
				//Calling the interface according to your own situation					//getProjectInfo(val).then(res => {
					//	 = 
						
					//})
				}
			},
		/*Clear items**/
			projectClear() {
			//Set according to your own situation				// = null
			},
 }
}
</script>