vue.js - 如何隐藏或删除 bootstrap-vue b-table 中的标头字段？

Question

出于某种原因，我不想b-table在我的网络中显示字段。换句话说，我不想显示表头字段。

但是我从来没有找到如何隐藏或删除 bootstrap-vue 中的字段（例如信息字段名称）。

请帮我。

我还有一个问题，为什么我可以通过cell(information)="row".

这是我的测试代码，你可以在操场上运行它。

预先感谢您的帮助。

<template>
  <div>
    <b-table
      striped
      hover
      :items="items"
    >
      <template v-slot:cell(information)="row">
        <p>{{row.item.information.test1}}</p>
        <p>{{row.item.information.test2}}</p>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { information: { test1: 1, test2: 1 } },
        { information: { test1: 3, test2: 3 } },
        { information: { test1: 2, test2: 2 } },
        { information: { test1: 4, test2: 4 } }
      ]
    };
  }
};
</script>

标签： vue.jsbootstrap-vue

Answer 1

如果你想完全隐藏thead表格的，你可以添加thead-tr-class="d-none"到你的b-table. 这将完全隐藏thead.

thead-tr-class可以在 Bootstrap-Vue 文档的属性参考下找到。b-table

d-none是一个引导实用程序类，可以在 Bootstrap 文档中找到显示实用程序。