【前后端分离】前台多表联查

最新推荐文章于 2023-02-07 14:21:00 发布

qq_29750461

最新推荐文章于 2023-02-07 14:21:00 发布

阅读量1.9k

点赞数

分类专栏： Spring Boot 文章标签： spring

本文链接：https://blog.csdn.net/qq_29750461/article/details/122735804

版权

Spring Boot 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

实现效果

在这里插入图片描述

多个条件实现数据库中数据的查询

前台页面代码

此处引入 dVO这样的对象，与后台的DVO类对应

<el-form :inline="true" :model="dVO" class="demo-form-inline">
        <el-form-item label="部门" label-width="70px">
          <el-select clearable v-model="dVO.departmentId" placeholder="请选择">
            <el-option
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.deptCount }}</span>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input clearable v-model="dVO.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input clearable v-model="dVO.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label-width="70px">
          <el-radio v-model="dVO.sex" label="0">男</el-radio>
          <el-radio v-model="dVO.sex" label="1">女</el-radio>
          <el-radio v-model="dVO.sex" label="">全部</el-radio>
          <!--        <el-button type="primary" @click="onSubmit">查询</el-button>-->
        </el-form-item>
        <el-form-item label="昵称" label-width="70px">
          <el-input clearable v-model="dVO.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetDVO">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getDList">查询</el-button>
          <el-button type="success" icon="el-icon-plus">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>

JS代码

//该部分增加 dVO 列表，对应名字尽量和后台中dVO类属性一致
data () {
    return {
      dVO: {
        departmentId: '',
        username: '',
        email: '',
        sex: '1',
        nickname: ''
      },
      // 用户集合
      dList: [],
      // 部门集合
      deptList: [],
      // currentPage4: 4,
      // 每页显示条数
      size: 6,
      // 总条数
      total: 100,
      // 当前页码
      current: 1,
      departments: [],
      value: ''
    }
  },
  // method 中设置 resetDoctorVO 方法
  methods: {
async getDList(){
      const {data} = await findDList(this.current,this.size,this.dVO)
      /* console.log(data); */
      this.dList = data.data.records
      this.total = data.data.total
    },
    // 重置查询
    resetDVO(){
      this.dVO.departmentId=''
      this.dVO.username=''
      this.dVO.sex=''
      this.dVO.nickname=''
      this.dVO.email=''
      this.getDList()
    }
}