双向绑定input输入框,监听值改变事件
<el-input
@input="input"
v-model="queryParams.keyword"
style="margin-bottom: 10px"
type="text"
prefix-icon="el-icon-search"
size="small"
placeholder="输入员工姓名全员搜索"
/>
queryParams: {
keyword: "", //模糊搜素关键字
},
methods:{
//模糊搜索
input() {
// 单位时间内只执行最后一次
// this的实例上赋值了一个timer的属性
//防抖
clearTimeout(this.timer); // 清理上一次的定时器
this.timer = setTimeout(() => {
this.queryParams.page = 1;
this.employeeList(); //这里在发一次请求
}, 500);
},
}
这里监听的事件是input,为什么不用change事件,注意change事件是离开焦点触发,input是只要内容发生变化就会触发,所以这里使用input更符合使用场景