如何隐藏 bootstrap-vue 表标题行答案

【问题标题】：how to hide bootstrap-vue table header row如何隐藏 bootstrap-vue 表标题行
【发布时间】：2018-09-25 08:09:54
【问题描述】：

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

【问题讨论】：

【解决方案1】：

在文档here 中，有一个选项可以设置标题的类（即生成的<thead>），其中thead-class 设置为<b-table> 元素，或标题行（即@ <thead>) 下的 987654325@ 元素，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>

【讨论】：

我可以补充一点，而不是使用自定义类 .hidden_header，您可以更轻松地使用 Bootstrap 默认的 d-none，它将隐藏它。
感谢范围内的提示对我帮助很大。现在我想问一下为什么那个范围会阻止它？如果没有其他父组件设置某个属性，并且仅在该组件中处理，为什么作用域不起作用？谢谢

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

table > thead {
    display:none !important;
}

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

【讨论】：

谢谢！但我一直在寻找更“vueish”的解决方案
这是我的情况的最佳解决方案。谢谢！