Vue中如何使用JavaScript实现多字段过滤功能

很容易就能把你的单字段过滤改成支持所有字段的全局搜索，核心思路就是对每个数据对象的所有属性值进行检查，只要有任意一个属性包含搜索关键词，就保留这条数据。

第一步：修改computed属性的过滤逻辑 #

你原来的代码只针对time字段做了检查，现在我们调整filteredItems的逻辑，让它遍历每个数据项的所有属性值：

computed: {
  filteredItems(){
    // 先把搜索词统一转成小写，避免大小写敏感问题
    const searchTerm = this.search.toLowerCase();
    return this.dataArray.filter(item => {
      // 将当前数据项的所有属性值提取为数组，然后检查是否有任意一个值包含搜索词
      return Object.values(item).some(value => 
        value.toLowerCase().includes(searchTerm)
      );
    })
  }
}

代码解释：

• Object.values(item)：把当前数据对象的所有属性值提取成一个数组（比如对第一条数据就是["12.02.2021", "Aaa", "1111", "Zzzz", "124-362"]）
• some()方法：只要数组中有任意一个元素满足条件，就返回true，这样只要数据项的任意一个字段包含搜索词，就会被保留在过滤结果里
• toLowerCase()和includes()：统一处理大小写，确保搜索不区分大小写，同时检查字符串是否包含搜索关键词

第二步：修正HTML中的变量名问题 #

注意你的HTML代码里有个小错误：v-for循环的变量名是dataArray，但你在<td>里用的是connectivityLogs，这会导致渲染失败，建议把循环变量名改成更清晰的item，然后对应使用item的属性：

<tr v-for="(item, i) in filteredItems" :key="i">
  <p class="table-iterator">{{ i + 1 }}</p> <!-- 这里原来的i--会导致索引异常，改成i+1显示序号更合理 -->
  <td class="table-row text-left">{{ item.date }}</td>
  <td class="table-row text-center">{{ item.time }}</td>
  <td class="table-row text-center">{{ item.level }}</td>
  <td class="table-row text-center">{{ item.service }}</td>
  <td class="table-row text-right">{{ item.description }}</td>
</tr>

可选：指定特定字段过滤（如果后续需要调整） #

如果你之后想改成只针对某几个特定字段过滤，而不是全部，也可以定义一个字段数组，然后遍历这个数组检查：

computed: {
  filteredItems(){
    const searchTerm = this.search.toLowerCase();
    // 指定需要搜索的字段
    const searchFields = ['date', 'time', 'level', 'service', 'description'];
    return this.dataArray.filter(item => {
      return searchFields.some(field => 
        item[field].toLowerCase().includes(searchTerm)
      );
    })
  }
}

这样调整后，你的输入框就能对表格的所有字段进行实时搜索过滤了~

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