el-input 筛选框的触发方式的区别

首先是组件自带的change事件,看官方定义：change 仅在输入框失去焦点或用户按下回车时触发而且在关键字不变的时候不会重复触发。这个适用的场景就在于请求接口的关键字搜索，触发方式广泛且不会出现相同的搜索条件请求多次的情况。回车触发后输入框不会失去焦点。

 <el-input
     v-model="selectValue" 
     placeholder="请输入内容"
     suffix-icon="el-icon-search"
     @change="fn_select()"
 />

由blur事件和回车事件组成的联合触发方法，失去焦点/点击回车/点击icon图标都可触发事件，触发方式与上面一致，不同的是同一个关键字可多次触发事件，回车触发后输入框也会失去焦点。

 <el-input
     v-model="selectValue" 
     placeholder="请输入内容"
     suffix-icon="el-icon-search"
     @blur="fn_select()"
     @keyup.enter.native="$event.target.blur"
 />

@input是在你input输入框输入的文字只要改变就会触发，输入中多次触发，适用于本地文件的模糊搜索适用。

 <el-input
     v-model="selectValue" 
     placeholder="请输入内容"
     suffix-icon="el-icon-search"
     @input="fn_select()"
 />

筛选最常用的正则，去掉关键字中所有的空格。其他的正则按需加即可。

this.selectValue = this.selectValue.replace(/\s+/g,'');