Vue2中v-for渲染的表格如何按行class实现显隐过滤

不需要额外操作DOM判断类名，直接基于现有数据判断逻辑绑定v-show即可，完全可以在模板内实现，逻辑和你现有类名规则100%对齐，不会出现状态不一致问题。

核心逻辑 #

• 开关绑定值dataShow为all时，所有表格行正常显示
• dataShow为selected时，仅保留watchedProperty中包含对应idorg的行（也就是带included类的行），其余allResults类的行隐藏

直接可用的模板代码 #

你只需要给<tr>标签加一行v-show判断即可，其余原有逻辑完全不用改：

<input v-model="dataShow" true-value="selected" false-value="all" type="checkbox" name="Show all or selected" />

<tbody>
  <tr 
    v-for="(comparable, index) in sortedSelectedComparables" 
    :key="index"
    :class="watchedProperty.map(el => el.idorg).includes(comparable.idorg) ? 'included' : 'allResults'"
    v-show="dataShow === 'all' || watchedProperty.map(el => el.idorg).includes(comparable.idorg)"
  >
    <td>{{ Math.round(comparable.distance) + 'm'}}</td>
    <td>{{ comparable.address }}</td>
    <td>{{ comparable.startdate }}</td>
    <td>{{ comparable.usedetail_en }}</td>
  </tr>
</tbody>

注：给v-for绑定:key是Vue2列表渲染的推荐写法，能避免节点复用导致的渲染异常。

可选优化（减少重复逻辑） #

如果你觉得模板里重复写了两次相同的判断逻辑太冗余，可以抽一个极简的方法复用判断逻辑，代码可维护性更高：
模板部分修改为：

<tr 
  v-for="(comparable, index) in sortedSelectedComparables" 
  :key="index"
  :class="isRowIncluded(comparable) ? 'included' : 'allResults'"
  v-show="dataShow === 'all' || isRowIncluded(comparable)"
>

在组件的methods中加一个判断方法即可：

methods: {
  isRowIncluded(comparable) {
    return this.watchedProperty.map(el => el.idorg).includes(comparable.idorg)
  }
}

注意点 #

不要尝试在模板里直接读取DOM的类名来判断显隐，Vue是数据驱动框架，基于源数据做判断不仅性能更好，也不会因为DOM更新时序问题出现显隐状态和类名不匹配的bug。

内容的提问来源于stack exchange，提问作者Alessandro Lo Verde