输入未填写时如何隐藏表格对应列？已尝试v-if但表头仍显示

你现在只给数据单元格<td>加了v-if判断，但表头的<th>没同步加对应的显示条件，所以才会出现数据列隐藏、表头却残留的情况。核心解决思路就是让表头和对应数据列使用完全一致的显示判断逻辑，具体分两种场景处理：

场景1：表头是循环渲染的 #

如果你的表头是通过遍历列名数组生成的，直接给<th>加上和<td>相同的v-if条件即可：

<thead>
  <tr>
    <!-- 给<th>同步添加判断条件 -->
    <th v-for="(label, key) in columnLabels" :key="key" v-if="array[key] !== null">
      {{ label }}
    </th>
  </tr>
</thead>
<tbody>
  <tr v-for="item in tableData" :key="item.id">
    <td v-for="(value, key) in item" :key="key" v-if="array[key] !== null">
      {{ value }}
    </td>
  </tr>
</tbody>

场景2：表头是硬编码的 #

如果表头是固定写死的，就给每个<th>单独添加对应字段的判断条件，和下方的<td>一一匹配：

<thead>
  <tr>
    <th v-if="array['name'] !== null">姓名</th>
    <th v-if="array['age'] !== null">年龄</th>
    <!-- 其他表头字段同理添加判断 -->
  </tr>
</thead>
<tbody>
  <tr v-for="item in tableData" :key="item.id">
    <td v-if="array['name'] !== null">{{ item.name }}</td>
    <td v-if="array['age'] !== null">{{ item.age }}</td>
    <!-- 其他数据列同理 -->
  </tr>
</tbody>

补充：更严谨的判断逻辑 #

如果输入字段可能出现空字符串''或undefined的情况，建议把判断条件改得更严谨，避免误判：

v-if="array[key] !== null && array[key] !== undefined && array[key] !== ''"

（注意：如果字段允许输入0这类合法数值，别用v-if="array[key]"，会把0当成空值隐藏）

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