如何隐藏Bootstrap-Vue <b-table>的表头行？默认生成表头仅显示数据行

当然有办法啦！Bootstrap-Vue的<b-table>提供了几种简单直接的方式来实现这个需求，下面给你分享几个常用方案：

方案1：使用官方提供的headless属性（推荐） #

这是最省心的方式，Bootstrap-Vue专门为这种场景设计了headless属性，只要将它设为true，就会自动隐藏表头行，只渲染数据项：

<b-table headless :items="yourDataList"></b-table>

这个属性会完全移除表头相关的DOM结构，不仅视觉上隐藏，连表头的DOM元素都不会生成，适合不需要任何表头功能（比如排序、筛选）的场景。

方案2：通过CSS自定义隐藏表头 #

如果你需要更灵活的控制（比如动态切换表头的显示/隐藏），可以用CSS来隐藏表头：

首先给表格添加一个自定义类：

<b-table :class="{'hide-table-header': true}" :items="yourDataList"></b-table>

然后在样式中添加：

.hide-table-header thead {
  display: none;
}

这种方式只是视觉上隐藏表头，DOM结构依然存在，适合需要保留表头相关功能但暂时隐藏的场景。

方案3：自定义表头插槽（不推荐，仅作补充） #

你也可以通过自定义表头插槽，将表头内容留空来实现隐藏效果，但这种方式不如前两种简洁：

<b-table :items="yourDataList">
  <template #head()></template>
</template>

不过这种方式表头的DOM结构还是会存在，只是没有内容，所以一般优先用前两种方案。

内容的提问来源于stack exchange，提问作者It-Z