Laravel + Vue 多字段独立搜索实现教程-php教程-PHP中文网

Laravel + Vue 多字段独立搜索实现教程

本文详解如何在 Laravel 后端与 Vue 前端协同实现表格的多字段独立搜索（如分别按客户公司名、案卷编号等不同列独立检索），避免 return 提前终止逻辑，并确保各搜索条件互不干扰、可组合叠加。

本文详解如何在 laravel 后端与 vue 前端协同实现表格的多字段独立搜索（如分别按客户公司名、案卷编号等不同列独立检索），避免 `return` 提前终止逻辑，并确保各搜索条件互不干扰、可组合叠加。

在构建管理后台时，常需为同一数据表提供多个独立搜索入口（例如：一个输入框搜「客户公司」，另一个搜「案卷编号」）。但初学者易陷入两个典型误区：一是误用多个 return 导致后半段逻辑永不执行；二是未正确链式构建查询对象，使搜索条件相互覆盖或失效。

✅ 正确做法：统一构建查询对象，动态追加 where 条件

Laravel 的 when() 方法是处理条件性查询的理想工具——它仅在参数为真值时才执行闭包内的逻辑，且支持链式调用。关键在于：所有搜索条件必须作用于同一个查询实例（$query），最后统一执行 ->get()。

以下是优化后的控制器 index 方法：

public function index()
{
    $query = Matter::query();

    // 当 search_client 存在时，添加 client_company 或 matter_type 的模糊匹配
    if (request('search_client')) {
        $query->where(function ($q) {
            $q->where('client_company', 'like', '%' . request('search_client') . '%')
              ->orWhere('matter_type', 'like', '%' . request('search_client') . '%');
        });
    }

    // 当 search_file_ref 存在时，单独添加 file_ref 模糊匹配（与其他条件 AND 关系）
    if (request('search_file_ref')) {
        $query->where('file_ref', 'like', '%' . request('search_file_ref') . '%');
    }

    return $query->orderBy('id', 'asc')->get();
}

? 注意：when() 内部若需 OR 逻辑（如 client_company 或 matter_type），必须用 where(function () {}) 包裹，否则 orWhere 会脱离当前作用域，导致意外的 SQL 逻辑错误（如全表扫描）。

? Vue 前端：复用同一 API，支持多参数共存

你当前将两个搜索拆分为独立请求（searchClient 和 searchFileRef），这虽可行，但无法实现「同时输入客户名和案卷号」的联合搜索。更优方案是：所有搜索参数统一提交至同一接口，由后端智能解析。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

更新 Vue 组件脚本如下：

data() {
  return {
    search_client: '',
    search_file_ref: '',
    matters: []
  }
},
methods: {
  // 统一触发搜索（兼容单条件 & 多条件）
  performSearch() {
    const params = new URLSearchParams();
    if (this.search_client) params.append('search_client', this.search_client);
    if (this.search_file_ref) params.append('search_file_ref', this.search_file_ref);

    axios.get(`/api/auth/matter?${params}`)
      .then(response => {
        this.matters = response.data;
      })
      .catch(error => {
        console.error('搜索失败:', error);
      });
  }
}

对应模板中，可保留两个独立输入框，但共用一个搜索动作（例如监听 @input 实时搜索，或统一点击按钮）：

<!-- 双搜索框，共享同一搜索逻辑 -->
<div class="d-flex gap-2 mb-3">
  <div class="flex-grow-1">
    <input v-model="search_client" type="text" placeholder="搜索客户公司或案件类型..." class="form-control">
</div>
  <div class="flex-grow-1">
    <input v-model="search_file_ref" type="text" placeholder="搜索案卷编号..." class="form-control">
</div>
</div>