ZiYoungSelectComponent

ZiYoungSelectComponent.vue

<template>
	<el-select :value="value" @input="handleInput($event)" filterable placeholder="Select" :filter-method="doFilter"
	           default-first-option>
		<el-option v-for="item in options" :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 = '';

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

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

		get options() {
// do regexp
			const re = new RegExp(this.filter, 'i');
			const copy = this.items.filter(el => re.test(el.label));

// sort with custom function
			const re1 = new RegExp('^' + this.filter, 'i');
			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;
			});
			return copy;
		}

	}
</script>