vue后台管理系统"多条件查询"书写逻辑

 

 

首先要创建el-from表单，在表单中创建两个输入框并双向绑定

 

首选行内表单:

 

 

代码如下：

 

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>

// 这是el-from表单对应的数据存放处,id，name则是form中input输入框
      formInline: {
        id: "",
        name: "",
      },

 

然后在查询按钮上绑定一个事件

代码：

  <el-button
            type="primary"
            class="btnFromSelect"
            @click="select()"
            size="small"
            >查询</el-button
          >

 

在事件中书写axios:把formInline表单中的值传进去，然后得到结果渲染基础表格上

select() {
      //多条件查询语句;
      axios
        .post("http://localhost:8087/admin/selectIfFromWhere/", this.formInline)
        .then((res) => {
          let database = res.data;
          this.ShowDateTable = database;
        });
}

 

后端代码：

书写一个类，把条件查询的要求写成类型; 例如:要通过id和name查询

 

Controller层代码:

 

 //多条件查询测试
    List<selectIf>selectFromIf(selectIf a);

 

Serve层代码:

//多条件查询测试
    List<selectIf>selectFromIfServe(selectIf a );

 @Override
    //多条件查询测试
    public List<selectIf>selectFromIfServe(selectIf a){
        return this.mapper.selectFromIf(a);
    }

 

mapper层代码：

  //多条件查询测试
    List<selectIf>selectFromIf(selectIf a);

 

核心:

 

 <!--多条件查询-->
    <select id="selectFromIf" parameterType="com.example.demo.entity.selectIf"  resultType="com.example.demo.entity.selectIf" >
        select *
        from edu_teacher
        <!--拼条件-->
        <where>
            1=1
            <if test="name !=null and name !='' ">
                and name =#{name}
            </if>
            <if test="id !=null and id!='' ">
                and id =#{id}
            </if>
        </where>

    </select>

 

参考图：