how do hidden or delete the header field in bootstrap-vue b-table?

丶灬走出姿态 提交于 2020-06-29 03:56:14

问题


for some reason, I don't want to show the fields of b-table in my web. In other words, I don't want to show the table head fields.

But I never find how to hidden or delete the fields(such as Information field name) in bootstrap-vue.

Please help me.

And I have another question, why can I get the value of items by cell(information)="row".

here is my test code, you can run it on playground.

Thank you in advance for you help.

<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>


回答1:


If you want to completely hide the thead of the table, you can add thead-tr-class="d-none" to your b-table. This will completely hide the thead.

thead-tr-class can be found under the property reference of b-table on the Bootstrap-Vue documentation.

d-none is a bootstrap utility class which can be found display utilities, on the Bootstrap documentation.



来源:https://stackoverflow.com/questions/62357607/how-do-hidden-or-delete-the-header-field-in-bootstrap-vue-b-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!