如何隐藏bootstrap-vue表头行

Question

bootstrap-vue默认情况下会为我的数据创建标题行.是否有任何方法可以隐藏标题行,<b-table>因此只会呈现数据项？

Answer 1

从文档这里,有一个选项来设置类的报头(即,所产生的<thead>与)thead-class设置到<b-table>元件,或以标题行(即,<tr>下元件<thead>用)thead-tr-class设置到<b-table>.只注意这是<style>作用域,这将无法正常工作.这是一个基于这个想法的简单组件.

<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>

Answer 2

你可以简单地使用“bootstrap magic”并添加thead-class="d-none"隐藏标题行：

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

Answer 3

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

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