Laravel + Vue 多字段独立搜索的正确实现方式

落浩小哥_1819

落浩小哥_1819

2026-06-27

553人浏览

原创

Laravel + Vue 多字段独立搜索的正确实现方式

本文详解如何在 Laravel 后端与 Vue 前端协同实现多个独立搜索框(如客户公司、案卷编号等)分别按不同数据库字段精准过滤,避免 return 提前终止逻辑,并确保查询条件可组合、可扩展。

本文详解如何在 laravel 后端与 vue 前端协同实现多个独立搜索框(如客户公司、案卷编号等)分别按不同数据库字段精准过滤,避免 `return` 提前终止逻辑,并确保查询条件可组合、可扩展。

在构建管理型后台时,常需为同一数据表(如 matters)提供多个独立搜索入口——例如「客户公司」和「案卷编号」分别对应 client_company 和 file_ref 字段。但若直接在控制器中使用多个 return(如原代码所示),PHP 会在第一个 return 执行后立即退出函数,导致后续逻辑完全失效。这是初学者常见的控制流误解。

✅ 正确做法是:统一构建查询对象(Query Builder),按需动态追加 where 条件,最后一次性执行 get()。以下是优化后的 Laravel 控制器实现:

// app/Http/Controllers/MatterController.php
public function index()
{
    $query = Matter::query();

    // 客户公司模糊搜索(支持部分匹配)
    if ($searchClient = request('search_client')) {
        $query->where('client_company', 'like', "%{$searchClient}%");
    }

    // 案卷编号模糊搜索
    if ($searchFileRef = request('search_file_ref')) {
        $query->where('file_ref', 'like', "%{$searchFileRef}%");
    }

    // ✅ 支持多条件叠加(如同时输入 client 和 file_ref,自动 AND 连接)
    return $query->orderBy('id', 'asc')->get();
}

? 关键点:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习