菜单管理系统实现区间查询

1.添加输入框

<el-form-item label="价格区间" prop="price">
        <el-input
          v-model="queryParams.params.beginPrice"
          placeholder="最高价"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 100px; margin-left: 8px"
        />
        -
        <el-input
          v-model="queryParams.params.endPrice"
          placeholder="最低价"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 100px; margin-left: 8px"
        />
      </el-form-item>

每个输入框对应一个参数（和bookmapper对应）

select a.id aid,a.name aname,author,a.num anum,price, b.name bname,type_id
from t_book a 
LEFT JOIN t_book_type b 
ON a.type_id = b.id 
WHERE price 
between ? and ? LIMIT ?

xml中的参数可以看到

and price between #{params.beginPrice} and #{params.endPrice}</if>

一个是params.beginPrice，一个是params.endPrice

2.添加参数 

在queryParams中添加两个参数

queryParams: {
       ..
        params:{
          beginPrice:null,
          endPrice:null
        }
      },

 通过getList()方法中的listBook(this.queryParams).then给后端发送请求，传递参数

3.查看结果

检查-->网络-->负载

可以看到请求发送成功

4.调整重置按钮

注意传入的参数是二级参数

resetQuery() {
      //只能重置一级参数
      this.resetForm("queryForm")
      //手动重置二级参数
      this.queryParams.params = {
        beginPrice: null,
        endPrice: null}
      this.handleQuery()
    },

5.优化

当前价格查询无法实现单区间查询，为了解决这个问题，我们可以选择给后端mapper多加限制条件

<if test="params.beginPrice != null and params.beginPrice != ''">and price &gt;= #{params.beginPrice}</if>
<if test="params.endPrice != null and params.endPrice != ''">and price &lt;= #{params.endPrice}</if>

这样就能实现单区间查询