Vue+JS表格条件搜索过滤功能失效，求正确实现方案

你当前的过滤逻辑完全没有用到选定的列和操作符，只是做了全局模糊搜索，所以没法实现精准匹配。我们可以一步步修改filteredRow计算属性来解决这个问题。

第一步：修正基础数据定义 #

首先检查你的columns和operators配置，原来的columns是空对象，应该改成包含列名的数组（或键值对对象用于自定义显示文本）；operators需要明确操作符标识与显示文本的映射，示例如下：

data() {
  return {
    model: { data: [] },
    // 示例：直接用列名数组，若需自定义显示文本可改为 {id: "ID", name: "姓名", age: "年龄"} 格式
    columns: ['id', 'name', 'age'], 
    operators: {
      equal: '=',
      greater: '>',
      greaterOrEqual: '>=',
      less: '<',
      lessOrEqual: '<='
    },
    query: {
      search_column: 'id',
      search_operator: 'equal',
      search_input: ''
    }
  }
}

第二步：重写精准过滤逻辑 #

修改computed中的filteredRow，核心逻辑是针对选定列，根据操作符和输入值做精准判断，同时处理类型转换和边界情况：

computed: {
  filteredRow() {
    // 解构查询参数，让代码更简洁易读
    const { search_column, search_operator, search_input } = this.query;
    
    // 空输入时直接返回所有数据，避免无效过滤
    if (!search_input.trim()) {
      return this.model.data;
    }

    // 转换搜索值类型：数值列转数字，字符串列保持原样
    let searchValue;
    // 根据你的实际业务定义哪些是数值类型列
    const numericColumns = ['id', 'age'];
    if (numericColumns.includes(search_column)) {
      searchValue = Number(search_input);
      // 若输入不是有效数字，返回所有数据（也可根据需求返回空数组）
      if (isNaN(searchValue)) {
        return this.model.data;
      }
    } else {
      searchValue = search_input.trim().toLowerCase();
    }

    // 执行精准过滤
    return this.model.data.filter(row => {
      const rowValue = row[search_column];
      // 根据操作符执行对应的判断逻辑
      switch (search_operator) {
        case 'equal':
          if (numericColumns.includes(search_column)) {
            return rowValue === searchValue;
          } else {
            // 字符串比较默认忽略大小写，需严格区分可移除toLowerCase()
            return String(rowValue).toLowerCase() === searchValue;
          }
        case 'greater':
          return rowValue > searchValue;
        case 'greaterOrEqual':
          return rowValue >= searchValue;
        case 'less':
          return rowValue < searchValue;
        case 'lessOrEqual':
          return rowValue <= searchValue;
        default:
          // 遇到未知操作符时默认保留该行，也可根据需求返回false
          return true;
      }
    });
  }
}

关键细节说明 #

1. 空输入处理：用户未输入内容时直接返回全量数据，既提升性能也保证体验友好。
2. 类型转换：数值列（如ID、年龄）必须转成数字类型比较，否则会出现"20" < "5"这类字符串比较的错误结果。
3. 操作符分支：每个操作符对应明确的判断逻辑，确保精准匹配选定的条件。
4. 大小写兼容：字符串比较默认忽略大小写，若业务需要严格区分，移除toLowerCase()即可。

可选扩展：支持模糊搜索 #

如果需要在equal操作符时支持模糊匹配（比如输入"jo"能匹配"John"），只需把equal分支的判断修改为：

case 'equal':
  if (numericColumns.includes(search_column)) {
    return rowValue === searchValue;
  } else {
    return String(rowValue).toLowerCase().includes(searchValue);
  }

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