Vue中渲染HTML表格时如何隐藏带_old后缀的键并展示新旧两个值？

步骤1：新增计算属性处理原始数据 #

在Vue组件的computed选项中新增逻辑，先过滤掉所有带_old后缀的键，同时匹配每个键对应的新旧值：

computed: {
  displayFields() {
    const rawData = this.changes
    // 提取所有不带_old后缀的有效键
    const validKeys = Object.keys(rawData).filter(key => !key.endsWith('_old'))
    // 组装每个键对应的展示数据
    return validKeys.map(key => ({
      label: key,
      newValue: rawData[key],
      oldValue: rawData[`${key}_old`] || ''
    }))
  }
}

步骤2：修改表格遍历代码 #

替换原有表格的v-for逻辑，遍历上述计算属性渲染内容：

<tr v-for="(item, index) in displayFields" :key="index">
  <th>
    {{ item.label }}
  </th>
  <td>
    <div>{{ item.newValue }}</div>
    <div v-if="item.oldValue" style="color: #666; font-size: 12px; margin-top: 4px;">
      {{ item.oldValue }}
    </div>
  </td>
</tr>

如果需要和目标效果一致的视觉区分，可以给旧值部分添加对应的样式类自定义样式即可。

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