vuejs2 - 如何隐藏 bootstrap-vue 表标题行

Question

bootstrap-vue默认情况下会为我的数据创建一个标题行。有什么方法可以隐藏 a 的标题行，<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

您可以简单地使用“引导魔术”并添加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'
  }
]

Answer 4

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

table > thead {
    display:none !important;
}

!important 标志是覆盖默认设置。