Question

默认情况下，

bootstrap-vue会为我的数据创建标题行。有没有办法隐藏<b-table>的标题行，所以只会呈现数据项？

Answer 1

从文档here，可以选择设置标头的类（即生成的<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

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

table > thead {
    display:none !important;
}

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

Answer 4

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

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

如何隐藏bootstrap-vue表头行

4 个答案: