contoh halaman pagination

<template>
    <div class="dashboard-contents">
        <div class="row">
            <div class="col-lg-6" style="margin-top: 20px;">
                <h2 style="padding:15px; margin-top:10px;">Daftar Buku Staff Marketing</h2>
            </div>
            <div class="col-lg-6" style="padding-top: 15px; margin-top: 20px;">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-3">
                        <select class="select-dropdown" name="" id="">
                            <option value="" disabled selected>Pilih bendera...</option>
                            <option value="Semua cabang">Semua bendera</option>
                            <option value="Cabang A">Bendera A</option>
                            <option value="Cabang B">Bendera B</option>
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <select class="select-dropdown" name="" id="">
                            <option value="" disabled selected>Pilih cabang...</option>
                            <option value="Semua cabang">Semua cabang</option>
                            <option value="Cabang A">Cabang A</option>
                            <option value="Cabang B">Cabang B</option>
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <download-excel class="btn waves-effect waves-circle waves-float pull-right button-export"
                            worksheet = "Daftar Kehadiran"
                            name = "data_kehadiran.xls"
                            :data = "exportData">
                            <img src="@/assets/images/file-text.png" alt="Alternate Text" /> Export
                        </download-excel>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 second-row">
                <div class="row">
                    <div class="col-lg-10"></div>
                    <div class="col-lg-2 search-div">
                        <input type="text" name="permission" placeholder="Cari inventory..." ng-model="query" value="" style="width: 100%; height: 34px; float: right; margin-bottom: 10px; border: 1px solid rgba(184, 55, 62, 0.5); background-color: white; border-radius: 5px; padding: 5px; margin-bottom: 24px;" />
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="table-div">
                    <b-table striped hover
                        id="Bsms"
                        :items="bsm"
                        :fields="fields"
                        class="table table-hover table-striped"
                        style="margin-top: 10px;">
                        <template v-slot:cell(TransactionNominal)="data">
                           {{ data.item.TransactionNominal | currency }}
                        </template>
                    </b-table>
                    <!-- Fungsi Pagination
                        v-model= current page / data halaman saat ini
                        total-rows=jumlah row dalam data
                        per-page = jumlah row dalah 1 halaman
                        aria-controls = id tabel yg ditambahkan
                     -->
                    <b-pagination
                        v-model="currentPage"
                        :total-rows="rows"
                        :per-page="perPage"
                        aria-controls="Bsms"
                    ></b-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
import $ from 'jquery'
import DownloadExcel from 'vue-json-excel'

import Bsms from '@/services/Transactions/Bsm'
import LegalEntities from '@/services/Companies/LegalEntities'
import Branches from '@/services/Companies/Branches'
import Employee from '@/services/Employees/Employees'

export default {
  name: 'BsmManagement.index',
  components: {
    DownloadExcel
  },
  //Pagination
  computed: {
    rows () {
      //hitung panjang data BSM
      return this.bsm.length
    }
  },
  data () {
    return {
      //definisikan per page dan halaman current isi 1 untuk awal
      perPage: 10,
      currentPage: 1,
      //selesai
      fields: [
        { key: 'Id', label: 'Action' },
        { key: 'created_at', label: 'Tanggal' },
        { key: 'Code', label: 'Kode Transaksi' },
        { key: 'TransactionNominal', label: 'Jumlah Transaksi' },
        { key: 'GroupId', label: 'Kode Group' },
        { key: 'CoordinatorId', label: 'Nama Koordinator' }
      ],
      exportData: [],
      userData: {},
      bsm: [],
      roles: [],
      legalEntity: [],
      branch: [],
      employee: []
    }
  },
  created: function () {
      this.init()
  },
  mounted: function () {
    window.$ = $
    if(localStorage.userData !== undefined) {
      this.userData = JSON.parse(localStorage.userData)
    } else {
      this.$router.push({ name: 'home' })
      location.reload()
    }
  },
  methods: {
    init: async function () {
        let result = await Bsms.index()
        let legalEntity = await LegalEntities.index()
        let branch = await Branches.index()
        let employee = await Employee.index()

        this.bsm = result.data
        this.exportData = result.data
        this.legalEntity = this.itemLookup(legalEntity.data)
        this.branch = this.itemLookup(branch.data)
        this.employee = this.itemLookup(employee.data)
    },
    itemLookup: function (json) {
        let data = []
        for(var i = 0; i< json.length; i++) {
            data[json[i].Id] = json[i]
        }
        return data
    },
    formatDate(time) {
      var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
      if(formattedTime == 'Invalid date') {
        formattedTime = '-'
      }
      return formattedTime
    },
    detail: function (id) {
        this.$router.push({ name: 'BsmManagement.detail', params: { id: id } })
    },
    edit: function (id) {
        this.$router.push({ name: 'BsmManagement.edit', params: { id: id } })
    },
    del: async function (id) {
        let result = await Bsms.delete(id)
        if(result.status == 200) {
            alert(result.data.message)
            this.$router.push({ name: 'BsmManagement.index' })
            location.reload()
        } else {
            alert("Delete Gagal")
            location.reload()
        }
    }
  }
}
</script>

<style>
.table-div {
    padding-left: 30px;
    margin-left: 0px !important;
    overflow-x: auto;
    overflow-y: auto;
}

.second-row {
    margin-top: 30px;
    padding-left: 30px;
}

.select-dropdown {
    width: 100%;
    height: 45px;
    border-color: #0059aa;
    border-radius: 5px;
}

.button-export {
    width: 100%;
    height: 45px;
    background-color: #0059aa;
    color:white;
    border-radius: 5px;
}

.button-create {
    width: 100%;
    height: 45px;
    background-color: #20c197;
    color:white;
    border-radius: 5px;
}
</style>