vue+elementui实现搜索功能并且清空搜索框页面刷新

在弄分页的时候已经完成了mybatisplus的分页，详情可以看我之前的文章，搜索功能只要加一个带条件的分页查询功能即可

服务接口：

public interface MybatisService extends IService<UserVO> {
    IPage<UserVO> selectByPage(int currentPage, int limit);
    IPage<UserVO> selectListByAdditon12(String condition,int currentPage, int pageSize) ;//这个是新加的

}

接口的实现类：

 public IPage<UserVO> selectListByAdditon12(String condition, int currentPage, int pageSize) {
        int conditioInt;
        QueryWrapper<UserVO> wrapper=new QueryWrapper<>();
        Page<UserVO> page = new Page<>(currentPage,pageSize);
        try{
             conditioInt=  Integer.valueOf(condition);
            wrapper=wrapper.like("id", conditioInt);
        }catch(Exception e){
            System.out.println("这个查询关键字不能转为数字!!!!!");
        }finally {

            IPage<UserVO> floorIPage = mybatisMapper.selectPage(page,wrapper.like("username",condition).or());
        }
        IPage<UserVO> floorIPage = mybatisMapper.selectPage(page,wrapper);





        return floorIPage;
    }

controle层：

    @PostMapping("/search")
    public IPage<UserVO> SearchPage(@RequestBody SearchVo searchVo){
        return mybatisService.selectListByAdditon12(searchVo.getCondition(),searchVo.getCurrentPage(),searchVo.getPageSize());
    }

后端的分页搜索功能就是上面这几步；

接下来是前端:

//添加一个搜索用的输入框
<el-input v-model="input" placeholder="请输入关键字" size="large" style="width:13%"  @keyup.enter.native="getUsereInfo()"  ></el-input>
//搜索按钮
<el-button type="primary" @click="getUsereInfo()">搜索</el-button>

//@keyup.enter.native="getUsereInfo()这个方法是按回车进行搜索也可以点击搜索按钮进行搜索、然后用下面这个监控输入框绑定的值input的变化，如果变成长度变为0也就是清空，就会触发这个函数，你们可以在这个函数里加个post或者get请求刷新页面即可；

watch:{
      input:function(){
          if (this.input.length == 0) {
        this.onfocus('clear');
        sessionStorage.setItem("clear",true);
       
      }
      }