渲染动态表格以错误的顺序显示单元格内容

Question

我正在尝试渲染一个带有动态标题的表格，并用对象数组填充它，目标是对齐填充有与标题同一列中的对象属性的单元格。

header是一个字符串数组，每个字符串对应一个对象属性，这样字符串的值就等于对象属性。

每个对象不一定包含表头作为属性。这是我到目前为止所得到的：

       <table>
          <thead>
            <tr>
              <th
                v-for="header in activeTableHeaders"
                :key="header"
                scope="col"
              >
                <p>
                  {{ header }}
                </p>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(dataItem, outerIndex) in renderableResults" :key="outerIndex">
              <td v-for="(key, innerIndex) in activeTableHeaders" :key="innerIndex">
                {{ dataItem[key] }}
              </td>
            </tr>
          </tbody>
        </table>

这是所显示内容的裁剪不当的图像：

这是问题所在：当我过滤数据时，例如： renderableResults.value = renderableResults.value.filter(doc => doc['ledv'] >= 200); 然后记录结果，我可以看到结果正确地包含了所有结果'ledv'属性小于200的已被过滤掉。

然而，表列仍然包含小于 200 的值：

我正在处理大量结果，因此我很难找出错误值的来源，我设法在第一行中找到“190”的值来自 lsv 而不是 ledv。

知道出了什么问题吗？我自己似乎无法弄清楚，我真的被困住了。

activeTableHeaders 如下所示：

这是 renderableResults 尽管看起来第一个结果是renderableResults 不是第一个要渲染的结果，很奇怪。

先感谢您！任何帮助将不胜感激！

Answer 1

问题是，虽然我正确过滤了结果，但渲染的结果也是分页的，我忘记更新分页结果