如何隐藏Bootstrap-Vue表头行

Question

bootstrap-vue 默认会为我的数据创建一个标题行。 有没有办法隐藏 <b-table> 的标题行，只呈现数据项？

- It-Z

Answer 1

根据这里的文档，可以通过将thead-class设置为<b-table>元素来为表头（即生成的<thead>）设置类，或者将thead-tr-class设置为<b-table>以为表头行（即<thead>下的<tr>元素）设置类。唯一要注意的是如果<style>是scoped的，则无法使用此选项。
以下是基于此思想的简单组件。

<template>
  <b-table :items="items" thead-class="hidden_header"/>
</template>

<script>

export default {
  name: 'my-table',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- If we add "scoped" attribute to limit CSS to this component only 
     the hide of the header will not work! -->
<style scoped>
    <!-- put scoped CSS here -->
</style>
<style>
.hidden_header {
  display: none;
}
</style>

- It-Z

---

我可以为您翻译这段内容。建议使用 Bootstrap 自带的 d-none 类来隐藏元素，而不是自定义类名 .hidden_header。这样做会更加方便。 - podcastfan88

谢谢，作用域提示对我帮助很大。现在我想问一下为什么使用作用域会防止它生效？如果没有其他父组件设置某个属性，而且它只在该组件中处理，为什么作用域不能起作用呢？谢谢。 - caniaskyouaquestion

Answer 2

您可以简单地使用"Bootstrap Magic"，并添加thead-class="d-none"来隐藏标题行：

<template>
  <b-table :items="items" thead-class="d-none" />
</template>

- udo

---

那简单多了。 - Yasin Okumuş

Answer 3

在你的字段对象中为每一列添加thStyle。

fields: [{
  key: 'key_here',
  label: 'Column Name',
  thStyle: {
     display: 'none'
  }
]

- JuanBruno

Answer 4

看起来文档中没有完全隐藏行的内容，但是您可以使用CSS来隐藏它：

table > thead {
    display:none !important;
}

!important 标志用于覆盖默认设置。

- aprouja1

---

谢谢！不过我正在寻找一个更“Vue 风格”的解决方案。 - It-Z

这是我情况下最好的解决方案。谢谢！ - Devin