avue-crud自定义复杂多表查询

最新推荐文章于 2023-12-20 10:52:38 发布

程序媛ly

最新推荐文章于 2023-12-20 10:52:38 发布

阅读量6.3k

点赞数 3

分类专栏： BladeX 文章标签： java vue mysql 数据库

本文链接：https://blog.csdn.net/weixin_43830788/article/details/112270275

版权

本文介绍了如何在avue-crud中自定义复杂查询逻辑，以应对多条件、多表关联查询的需求。通过重写查询插槽，实现了时间范围选择、多选设备信息和多选维修状态等功能。查询实体、mapper文件、service和controller的实现细节也被详细阐述，确保前端查询条件能正确传递并匹配数据库中的数据。

摘要由CSDN通过智能技术生成

avue-crud中自定义查询

avue-crud原生样式

在这里插入图片描述

在使用crud表格时，在需要查询得字段下设置属性search:true。即可实现框架自带得查询。但是，这些查询是一些简单得单表字段查询，如果前端查询得逻辑比较复杂，需要自定义前端页面得查询逻辑。

avue-crud自定义复杂查询
（1）项目需求文件中，要求得查询样式如下：

查询项比较复杂，因此需要自定义页面得查询逻辑。在avue-crud中重写查询以及查询按钮插槽中的内容。

<template slot="search" slot-scope="{row,size}">
        <el-form :inline="true" >
          <el-form-item label="设备信息:" style="margin-left: 20px">
            <el-select v-model="search.eqpInfo" multiple placeholder="请选择" :size="size">
              <el-option  v-for="item in eqpInfoList" :key="item.id" :label="item.eqpId" :value="item.id">
                <span style="float: left">{
   {
    item.eqpId }}</span>
                <span style="color: #8492a6; font-size: 13px">{
   {
    item.eqpName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="维修状态:"  style="margin-left: 20px">
            <el-checkbox-group v-model="search.orderstatus" style="margin-right: 10px">
              <el-checkbox v-for="item in orderstatusList"  :label="item.dictValue" :value="item.dictKey" :key="item.dictKey">{
   {
   item.dictValue}}</el-checkbox>
            </el-checkbox-group>
          <