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

Question

bootstrap-vue默认情况下将为我的数据创建一个标题行。有没有办法隐藏 <b-table> 的标题行所以只有数据项会被渲染？

Answer 1

来自文档here ，有一个选项可以使用 <thead> 设置 header 的类(即生成的 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>