将rest api数据放入bootstrap Vue表和分页

npm install bootstrap-vue vue

import { BTable, BPagination } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

data() {
  return {
    items: [], // 存储从 REST API 获取的数据
    currentPage: 1, // 当前页码
    perPage: 10, // 每页显示的数据量
    totalItems: 0 // 总数据量
  }
},

import axios from 'axios'

mounted() {
  axios.get('https://api.example.com/data') // 替换为你的 REST API 地址
    .then(response => {
      this.items = response.data
      this.totalItems = response.data.length
    })
    .catch(error => {
      console.error(error)
    })
},

<template>
  <div>
    <b-table :items="items.slice((currentPage - 1) * perPage, currentPage * perPage)">
      <!-- 在这里定义表格的列 -->
    </b-table>
    <b-pagination v-model="currentPage" :total-rows="totalItems" :per-page="perPage"></b-pagination>
  </div>
</template>