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