Vue b-table hide one column

user_13484913 0
Viewed 484

I am really new to vue and for this project I am using Vue, Bootstrap-vue to paginate my data nameList. Is there a way that I can hide one column nameList.id and display first_name and last_name only.

Code on JsFiddle = https://jsfiddle.net/ujjumaki/onqw5dkz/3/

View

<div class="overflow-auto">
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
    <p class="mt-3">Current Page: {{ currentPage }}</p>
    <b-table id="my-table" :items="nameList" :per-page="perPage" :current-page="currentPage" medium selectable>
    </b-table>
</div>

JavaScript

data(){
  return{
    nameList: [
          { id: 1, first_name: 'The Great', last_name: 'Gazzoo' },
          { id: 2, first_name: 'Rockhead', last_name: 'Slate' },
          { id: 3, first_name: 'Pearl', last_name: 'Slaghoople' },
          { id: 4, first_name: 'Jasmine', last_name: 'Rit' }
    ],
    perPage: 2,
    currentPage: 1
    }
},

Computed

computed: {
    rows() {
       return this.nameList.length
    }
},
bootstrap-vue twitter-bootstrap vue.js pagination
1 Answers

You could configure the fields as following:

<b-table :items="items" :fields="fields"></b-table>

<script>
  export default {
    data() {
      return {
        fields: ['first_name', 'last_name'],
      }
    }
  }
</script>

Or, since you're not using SFC files

new Vue({
  el: "#app",
  ...
  fields: ['first_name', 'last_name'],
  ...
})

From the documentation here: https://bootstrap-vue.org/docs/components/table

user_88165850
Related