如何在JavaScript及ngx-datatable中实现多列数据过滤？

一、JavaScript中过滤多字段数据的通用方法 #

要过滤对象数组的多个字段，核心思路是遍历需要匹配的字段集合，只要任意一个字段符合搜索条件就保留该条目，常用Array.prototype.some()来实现：

• 定义需要过滤的字段列表（如['id', 'nombre', 'phone']）
• 对每个条目，检查字段列表中是否存在至少一个字段包含搜索关键词
• 注意处理不同数据类型：比如数字类型的id需要先转为字符串再匹配

二、ngx-datatable多列过滤的具体实现 #

针对你现有代码，只需修改过滤逻辑，新增对id、phone等字段的匹配即可。修改后的代码如下：

filterUpdate(event) {
  const val = event.target.value.toLowerCase().trim();
  
  // 定义需要支持过滤的字段列表
  const filterFields = ['id', 'nombre', 'phone'];

  const filterData = this.rows.filter((item) => {
    // 空搜索值时返回所有数据
    if (!val) return true;
    
    // 遍历字段列表，只要有一个字段匹配就保留当前条目
    return filterFields.some(field => {
      // 处理字段值：数字转字符串，统一转为小写（仅针对字符串类型字段）
      let fieldValue = item[field];
      if (typeof fieldValue === 'number') {
        fieldValue = fieldValue.toString();
      } else if (typeof fieldValue === 'string') {
        fieldValue = fieldValue.toLowerCase();
      }
      // 判断是否包含搜索关键词
      return fieldValue?.includes(val);
    });
  });
    
  this.filterRows = filterData;
  console.log(filterData);
}

代码说明： #

1. 字段列表定义：通过filterFields统一管理需要过滤的字段，后续新增字段只需修改这个数组即可
2. 数据类型兼容：处理数字类型的id（转为字符串），字符串类型统一转小写，避免大小写敏感问题
3. 空值处理：搜索框为空时直接返回所有数据，优化用户体验
4. 高效匹配：使用some()方法，只要找到一个匹配字段就停止当前条目的遍历，提升性能

内容的提问来源于stack exchange，提问作者Juan Diego Arteaga