ZiYoungSelectComponent v0.2

ZiYoungSelectComponent2.vue

<template>
	<el-select :value="value" @input="handleInput($event)" filterable placeholder="Select" :filter-method="filterCustomMethod"
	           default-first-option>
		<el-option v-for="(item, index) in filteredOptions" :key="item[valueField]" :label="item[labelField]" :value="item[valueField]">
		</el-option>
	</el-select>
</template>

<script lang="ts">
	import Vue from 'vue';
	import { Component, Prop } from 'vue-property-decorator';

	@Component({})

	export default class ZiYoungSelectComponent extends Vue {
		@Prop({ required: true })
		items: any[];

		@Prop({})
		value: string;

		@Prop({
			default: 'value',
		})
		valueField: string;

		@Prop({
			default: 'label',
			type: String
		})
		labelField: string;

		filter = '';
		filteredOptions = [];
		created() {
			this.filteredOptions = this.items;
		}

		// doFilter(filter) {
		// 	this.filter = filter;
		// }

		handleInput(input) {
			console.log(input);
			this.filter = '';
			this.$emit('input', input);
		}

		filterCustomMethod(query: string) {
			console.log(query);
			const re = new RegExp(query, 'i');
			const copy = this.items.filter(el => re.test(el.label));

			const re1 = new RegExp('^' + query, 'i');
			if (query) {
				copy.sort(function (a, b) {

					const ares = re1.test(a.label);
					const bres = re1.test(b.label);
					if (ares && !bres) return -1;
					if (!ares && bres) return 1;
					return 0;
				});
			}

			console.log(copy);
			this.filteredOptions = copy;
		}
	}
</script>