为Element框架的＜el-select/＞组件添加输入校验

为Element框架的组件添加输入校验

需求分析：

<el-select filterable>...</el-select>组件为可输入搜索字段的选择框，但组件知道的@change事件并不会为输入进行事件触发，但需求需要为其进行输入校验。

解决方法：

首先找到组件里面的<input>元素。

然后为其只读属性设置为false。

最后为其添加input事件，并设置执行函数。

代码展示：

<template>
	<div class="countries-select">
		<el-select
			filterable
		>
		</el-select>
	</div>
</template>

<script>
export default {
	mounted() {
		const countriesSelect = document.querySelector('.countries-select input');
	    countriesSelect.readOnly = false;
	    countriesSelect.addEventListener('input', (val) => {
	      if (val.target.value.search(/[^a-zA-Z0-9-_\/ ]/g) !== -1) {
	        val.target.value = val.target.value.substr(0, val.target.value.length - 1);
	      }
	    })
	}
}
</script>