如何隐藏 bootstrap-vue table header 行

Question

bootstrap-vue 默认情况下会为我的数据创建一个 header 行。有什么方法可以隐藏 <b-table> 的 header 行，以便仅呈现数据项？

Answer 1

文档中似乎没有任何内容可以完全隐藏该行，但您可以使用 CSS 来隐藏它：

table > thead {
    display:none !important;
}

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

Answer 2

从文档 here 中，有一个选项可以为 header（即生成的 <thead>）设置 class，并设置 thead-class <b-table> 元素，或 header 行（即 <thead> 下的 <tr> 元素），其中 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 3

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

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

Answer 4

您可以简单地使用“bootstrap 魔法”并添加 thead-class="d-none" 来隐藏 header 行：

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

如何隐藏 bootstrap-vue table header 行

how to hide bootstrap-vue table header row

vuejs2

bootstrap-vue