如何在AG Grid客户端通过另一列数值过滤数据行？

当然可以在客户端实现这类跨列过滤，下面用原生JavaScript和Vue.js两种常见场景举例：

原生JavaScript实现 #

假设你的HTML表格结构如下：

<table id="costTable">
  <thead>
    <tr>
      <th>Expected Cost</th>
      <th>Actual Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1000</td>
      <td>500</td>
    </tr>
    <tr>
      <td>500</td>
      <td>700</td>
    </tr>
  </tbody>
</table>
<button onclick="filterRows()">筛选Expected Cost < Actual Cost的行</button>

对应的JavaScript逻辑：

function filterRows() {
  const table = document.getElementById('costTable');
  const rows = table.querySelectorAll('tbody tr');
  
  rows.forEach(row => {
    // 获取两列的数值
    const expectedCost = parseFloat(row.cells[0].textContent);
    const actualCost = parseFloat(row.cells[1].textContent);
    
    // 比较后控制行的显示/隐藏
    row.style.display = expectedCost < actualCost ? '' : 'none';
  });
}

逻辑说明：

• 遍历表格的每一行（跳过表头）
• 将单元格文本转为数值类型，避免字符串比较的误差
• 根据Expected Cost < Actual Cost的条件，切换行的显示状态

Vue.js实现（前端框架场景） #

如果是用Vue这类框架，直接过滤数据数组即可：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Expected Cost</th>
          <th>Actual Cost</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredCosts" :key="item.id">
          <td>{{ item.expectedCost }}</td>
          <td>{{ item.actualCost }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      costList: [
        { id: 1, expectedCost: 1000, actualCost: 500 },
        { id: 2, expectedCost: 500, actualCost: 700 }
      ]
    };
  },
  computed: {
    filteredCosts() {
      // 直接过滤出符合条件的数据项
      return this.costList.filter(item => item.expectedCost < item.actualCost);
    }
  }
};
</script>

这种方式更适合数据驱动的前端项目，通过计算属性实时返回过滤后的数据集，渲染时只展示符合条件的行。

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