elementui中el-input回车搜索实现示例

<template>
 <div id="app">
  <!-- 使用vue自带的绑定回车事件
  使用trim修饰，不让用户乱输入空格 -->
  <el-input 
   v-model.trim="searchData"
   @keyup.enter.native="search"
  ></el-input>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   searchData: "",
  };
 },
 watch:{
  // 监听input输入框，若没东西了，就回复默认状态
  searchData:function(newnew,oldold){
   if(newnew == ""){
    // 发请求回到初始列表数据状态
    console.log("搜索框没东西了，回复初始状态");
   }
  }
 },
 methods: {
  search(){
   // 控制一下，如果用户没输入东西就不去搜索
   if(this.searchData == ""){
    return
   }else{
    // 把searchData带着，发请求获取有关联的数据并呈现在页面中
    console.log("带着关键字交给后端搜索",this.searchData);
   }
  }
 },
};
</script>