Vue表格搜索功能失效排查及最优实现方案咨询

算力阿峰

2026-5-15

问题分析与解决方案

我帮你排查了下代码，搜索功能失效的问题完全出在filteredRow这个计算属性里，有两个核心细节没处理好：

1. 循环时提前返回，只检查第一个字段

你在遍历row的属性时，第一次循环就直接return了，这意味着只会检查每行的第一个字段，后面的字段根本没机会参与匹配判断。

2. `indexOf`的返回值被错误当成布尔值

indexOf返回的是匹配字符串的索引位置：找到时返回>=0的数字，没找到返回-1。但在JavaScript里，0会被当成false处理——这就是你打印出很多0，但搜索结果不对的原因，因为匹配到开头的内容会被误判为不匹配，直接过滤掉。

修复后的`filteredRow`实现

computed: {
  filteredRow: function(){
    const searchStr = this.query.search_input.trim().toLowerCase();
    // 如果搜索框为空，直接返回所有数据
    if (!searchStr) return this.model.data;
    
    return this.model.data.filter((row) => {
      // 遍历所有字段，只要有一个字段匹配就保留该行
      return Object.values(row).some(value => {
        return String(value).toLowerCase().includes(searchStr);
      });
    });
  }
}