Laravel+Vue实现表格多输入框分字段搜索异常解决方案

问题根因 #

• 后端控制器写了两个独立的return语句，PHP执行到第一个return后会直接终止方法运行，第二个搜索逻辑永远不会被触发
• 前端拆分了两个独立表单和对应请求方法，每次搜索仅传递单个参数，无法支持单条件、多条件组合的灵活检索场景

后端改造（Laravel控制器） #

不要拆分多个查询返回逻辑，用链式调用when方法拼接所有搜索条件，所有条件默认是AND关系——即填了哪个参数就生效哪个过滤规则，多个参数同时填时返回同时满足所有条件的结果。

public function index()
{
    return Matter::when(request('search_client'), function($query){
        $query->where('client_company', 'like', '%' . request('search_client') . '%');
    })
    ->when(request('search_file_ref'), function($query){
        $query->where('file_ref', 'like', '%' . request('search_file_ref') . '%');
    })
    ->orderBy('id', 'asc')
    ->get();
}

注意：如果需要保留最初单输入框同时匹配多个字段的OR逻辑，必须用闭包包裹同组OR条件，避免和其他AND条件拼接出现SQL逻辑错误，示例写法如下：

// 单搜索词同时匹配客户企业、事项类型的写法
->when(request('search_keyword'), function($query){
    $query->where(function($subQuery){
        $subQuery->where('client_company', 'like', '%' . request('search_keyword') . '%')
            ->orWhere('matter_type', 'like', '%' . request('search_keyword') . '%');
    });
})

前端改造（Vue） #

不需要拆分两个独立表单和请求方法，统一管理所有搜索参数，每次请求把所有已填写的搜索条件一起传给后端，既支持单个字段独立搜索，也支持多字段组合搜索。

模板部分 #

<!-- 搜索区域 -->
<div class="search-wrapper">
    <div class="input-group">
        <input
            v-model="search_client"
            type="text"
            placeholder="搜索客户企业"
            class="form-control"
        />
    </div>
    <div class="input-group">
        <input
            v-model="search_file_ref"
            type="text"
            placeholder="搜索文件编号"
            class="form-control"
        />
    </div>
    <div class="input-group-append">
        <button type="button" @click="getMatters" class="btn btn-primary">
            <i class="fas fa-search"></i>
        </button>
        <button type="button" @click="resetSearch" class="btn btn-outline-secondary">
            重置
        </button>
    </div>
</div>

脚本部分 #

export default {
    data() {
        return {
            search_client: '',
            search_file_ref: '',
            matters: []
        }
    },
    methods: {
        // 统一获取列表/搜索方法
        getMatters() {
            axios.get('/api/auth/matter', {
                params: {
                    search_client: this.search_client,
                    search_file_ref: this.search_file_ref
                }
            }).then(res => {
                this.matters = res.data
            })
        },
        // 重置搜索条件
        resetSearch() {
            this.search_client = ''
            this.search_file_ref = ''
            this.getMatters()
        }
    },
    mounted() {
        // 页面加载默认拉取全量数据
        this.getMatters()
    }
}

扩展优化点 #

• 如果需要输入内容实时触发搜索，不需要手动点搜索按钮，给两个输入框加@input="getMatters"即可，建议加300ms左右的防抖，避免输入过程中频繁发请求
• 后续新增筛选项（比如创建时间范围、事项状态）只需要两步：前端加对应输入框绑定参数，在请求params里传值；后端链式新增对应when条件判断即可，扩展性很强
• 搜索参数为空时when方法会自动跳过对应条件，不需要额外写判空逻辑，和全量查询的逻辑完全兼容

内容的提问来源于stack exchange，提问作者User