Vue表格删除空白行：v-for搭配v-if仍生成空tr问题问询

问题根因 #

你当前的写法会生成空tr的核心原因是：v-for指令绑定在<tr>标签上，遍历逻辑触发时无论内部v-if是否满足，都会先创建<tr>节点，只是内部的div内容被条件隐藏，空的tr节点自然会产生多余空白。

解决方法 #

方法1：直接把v-if移到tr标签上（适合数据量小的场景）

直接将过滤条件和v-for写在同一个<tr>标签上，不满足条件的项直接不会渲染tr节点：

<tr 
  v-for="(value, key) in object" 
  :key="key" 
  v-if="value.item1 != null"
>
  <td width="400" class="alnleft">{{value.item1}}</td>
  <td width="50" class="alnright">{{value.item2}}</td>
</tr>

注意：Vue模板中不需要额外加this.前缀，默认读取当前实例的属性。

方法2：用计算属性提前过滤数据（更推荐，性能更好）

如果数据量较大，推荐先通过计算属性过滤掉不需要渲染的项，再进行遍历，避免模板中同时使用v-for和v-if带来的性能损耗：
首先在组件的computed配置中添加过滤逻辑：

computed: {
  validList() {
    // 过滤出item1不为空的项
    return Object.values(this.object).filter(item => item.item1 != null)
  }
}

模板中直接遍历过滤后的计算属性即可：

<tr 
  v-for="(value, index) in validList" 
  :key="index"
>
  <td width="400" class="alnleft">{{value.item1}}</td>
  <td width="50" class="alnright">{{value.item2}}</td>
</tr>

如果需要保留原object对应的key，可以调整计算属性的返回逻辑，把key也存入过滤后的项中，再绑定到:key上即可。

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