Vuetify的v-data-table组件如何跳过数组特定元素不展示？

方案正确性与问题修正 #

你想在不改动原数组的前提下过滤重复ID元素的需求完全可行，绑定过滤后新数组到v-data-table的思路是对的，但你目前写的过滤方法存在逻辑错误，无法正常实现去重：

• 你写的some判断逻辑会只要已过滤数组中存在任意一个ID不等于当前元素ID，就插入当前元素，最终会出现大量重复数据，达不到去重效果。

优化后的去重代码 #

推荐用Set做ID去重，实现更简单、执行效率更高，代码如下：

filterRemittances () {
  const idSet = new Set()
  // 过滤逻辑：首次出现的ID保留，重复出现的ID直接跳过
  this.filteredRemittances = this.remittances.filter(item => {
    if (idSet.has(item.id)) return false
    idSet.add(item.id)
    return true
  })
}

如果需要保留重复ID中最后一次出现的元素，只需要先把原数组倒序再执行上述过滤即可。

表格使用说明 #

你修改后的v-data-table代码没有问题，只需要注意每次原数组remittances更新时，重新调用filterRemittances方法同步过滤后的数组即可，全程不会改动原数组的原始数据。

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