效果展示：默认查询

条件过滤查询：

  实现思路：

1、检索文本框绑定自定义实体参数对象:

 <el-input v-model="book.bookName"  placeholder="书籍关键字"></el-input>

2、检索按钮绑定自定义的事件方法，自定义方法编写在methods 的属性中searchHandler

 <!--自定义searchHandler函数--> 
 <el-button type="primary" @click="searchHandler">查询</el-button> 

3、axios 发起数据异步请求，相关页面重新渲染完成检索功能。

  searchHandler(){        
        var self = this 
        this.$axios.get('/book/find?bookName=' + this.book.bookName) 
          .then(function (res) { 
            self.tableData = res.data.data 
          }) 
          .catch(function (err) { 
            console.log(err) 
          })  
    }

相关代码：

VUE +ElementUI 前端代码：

 <style> 
  h1, h2 { 
  font-weight: normal; 
} 
ul { 
  list-style-type: none; 
  padding: 0; 
} 
li { 
  display: inline-block; 
  margin: 0 10px; 
} 
a { 
  color: #42b983; 
} 
</style> 
<template> 
  <div id="bookSearch"> 
      <el-col :span="19"> 
          <el-form :inline="true"> 
            <el-form-item label="书名"> 
              <el-input v-model="book.bookName"  placeholder="书籍关键字"></el-input> 
            </el-form-item> 
          <el-form-item > 
            <div style="text-align:right"> 
              <!--自定义searchHandler函数--> 
              <el-button type="primary" @click="searchHandler">查询</el-button>  
            </div> 
          </el-form-item> 
        </el-form> 
      </el-col> 
 
      <el-table :data="tableData" stripe border style="width:100%" highlight-current-row> 
      <el-table-column type="selection" width="55"> 
      </el-table-column> 
      <el-table-column prop="bookId" label="ID" align="center" min-width="120"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookId}}</span> 
        </template> 
      </el-table-column> 
      <el-table-column prop="bookName" label="书名" align="center" min-width="100"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookName}}</span> 
        </template> 
      </el-table-column> 
      <el-table-column prop="bookAuthor" label="作者" align="center" min-width="100"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookAuthor}}</span> 
        </template> 
      </el-table-column> 
      <el-table-column prop="bookpublish" label="出版社" align="center" min-width="100"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookpublish}}</span> 
        </template> 
      </el-table-column> 
    </el-table> 
  </div> 
</template> 
 
<script> 
export default { 
   data () { 
     return { 
        tableData: [], 
        book: { 
          bookName: '' 
        } 
      } 
  }, 
  methods:{ 
    init () { 
        var self = this 
        this.$axios.get('/book/find') 
          .then(function (res) { 
            self.tableData = res.data.data 
          }) 
          .catch(function (err) { 
            console.log(err) 
          }) 
      }, 
    searchHandler(){        
        var self = this 
        this.$axios.get('/book/find?bookName=' + this.book.bookName) 
          .then(function (res) { 
            self.tableData = res.data.data 
          }) 
          .catch(function (err) { 
            console.log(err) 
          })  
    } 
  }, 
  mounted: function () { 
      this.init() 
  } 
} 
</script>

SpringBoot 后端代码：

package com.zzg.controller; 
 
import java.util.ArrayList; 
import java.util.List; 
import java.util.stream.Collectors; 
 
import org.apache.commons.lang3.RandomUtils; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.CrossOrigin; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestBody; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RequestParam; 
import org.springframework.web.bind.annotation.ResponseBody; 
 
import com.alibaba.druid.util.StringUtils; 
import com.alibaba.fastjson.JSONObject; 
import com.zzg.common.model.Result; 
import com.zzg.domain.TestBook; 
 
import io.swagger.annotations.Api; 
import io.swagger.annotations.ApiOperation; 
import io.swagger.annotations.ApiParam; 
 
@Controller 
@RequestMapping("/api/book") 
@CrossOrigin 
@Api(value = "模拟测试Controlle", tags = "模拟测试操作服务") 
public class TestBookController { 
	static List<TestBook> container = new ArrayList<TestBook>(); 
	static { 
		container.add(new TestBook("1","java编程思想","**译","机械出版社","1","100","Java 编程核心思想")); 
		container.add(new TestBook("2","Python编程思想","**译","机械出版社","2","100","Python 编程核心思想")); 
		container.add(new TestBook("3","PHP编程思想","**译","机械出版社","3","100","PHP 编程核心思想")); 
		container.add(new TestBook("4","java设计模式","**译","机械出版社","1","100","Java设计模式编程核心思想")); 
		container.add(new TestBook("5","算法导论","**译","机械出版社","1","100","算法导论")); 
		 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象保存") 
	@RequestMapping(value = "/insert", method = { RequestMethod.POST}, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	public Result insert( 
			@RequestBody @ApiParam(name = "模拟测试对象", value = "json格式对象", required = true)JSONObject entity) { 
		TestBook user = entity.toJavaObject(TestBook.class); 
		if(StringUtils.isEmpty(user.getBookId())) { 
			RandomUtils.nextInt(6, 1000); 
			Integer sid = RandomUtils.nextInt(); 
			user.setBookId(String.valueOf(sid)); 
		} 
		 
		container.add(user); 
		return Result.ok(); 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象删除") 
	@RequestMapping(value = "/delete/{id}", method = { RequestMethod.DELETE }) 
	@ResponseBody 
	public Result delete( 
			@PathVariable String id) { 
 
//		container.stream() 
//		.filter(u-> u.getId().equalsIgnoreCase(id)) 
//		.findFirst() 
//		.ifPresent(u->System.out.println(u.getName())); 
		container.removeIf(u -> u.getBookId().equalsIgnoreCase(id)); 
		 
		return Result.ok(); 
		 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象更新") 
	@RequestMapping(value = "/update", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	public Result update( 
			@RequestBody @ApiParam(name = "用户对象", value = "json格式对象", required = true)  TestBook entity) { 
		container.removeIf(u -> u.getBookId().equalsIgnoreCase(entity.getBookId())); 
		container.add(entity); 
		return Result.ok(); 
	} 
	 
	@RequestMapping(value="/find", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询") 
	public String find(@RequestParam(required = false) String bookName) { 
		JSONObject obj = new JSONObject(); 
		 
		obj.put("code", 0); 
		if(!StringUtils.isEmpty(bookName)) { 
			List<TestBook> filter = container.stream().filter(item ->{ 
				return item.getBookName().contains(bookName); 
			}).collect(Collectors.toList()); 
			obj.put("data", filter); 
		} else { 
			obj.put("data", container); 
		} 
		 
		return obj.toJSONString(); 
	} 
}