如何隐藏 bootstrap-vue 表标题行

Posted 2023-02-16

【中文标题】如何隐藏 bootstrap-vue 表标题行

【英文标题】：how to hide bootstrap-vue table header row

【发布时间】：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”的解决方案

这是我的情况的最佳解决方案。谢谢！