El siguiente código mostrará/ocultará todas las columnas en una tabla de BootstrapVue . El crédito del código va a la respuesta aquí;

Mostrar/Ocultar columnas dinámicamente con un componente bootstrap-vue y bootstrap 3

 window.onload = () => { new Vue({ el: '#app', computed: { visibleFields() { return this.fields.filter(field => field.visible) } }, data() { return { items: [ { id: 1, first: 'Mike', last: 'Kristensen', age: 16 }, { id: 2, first: 'Peter', last: 'Madsen', age: 52 }, { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 }, { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 }, ], fields: [ { key: 'id', label: 'ID', visible: true }, { key: 'first', label: 'First Name', visible: true }, { key: 'last', label: 'Last Name', visible: true }, { key: 'age', label: 'Age', visible: true }, ] } } }) } <link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.min.js"></script> <div id='app'> <b-checkbox :disabled="visibleFields.length == 1 && field.visible" v-for="field in fields" :key="field.key" v-model="field.visible" inline > {{ field.label }} </b-checkbox> <br /><br /> <b-table :items="items" :fields="visibleFields" bordered> </b-table> </div>

Así es como se verá la mesa;

Lo que quiero es mostrar/ocultar solo la columna First Name y Last Name , no todas las columnas.

Estoy usando Vue v2.6 y BootstrapVue .