使用axios请求分页

npm install axios

<template>
  <div>
    <el-table :data="items" style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />
      <!-- 添加其他列 -->
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      layout="total, prev, pager, next, jumper"
    />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
    };
  },
  methods: {
    async fetchData(page) {
      try {
        const response = await axios.get(`/api/items`, {
          params: {
            page: page,
            limit: this.pageSize,
          },
        });
        
        // 假设后端返回的数据结构如下
        this.items = response.data.items;
        this.totalItems = response.data.totalItems; // 确保后端返回总条目数
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.fetchData(newPage);
    },
  },
  mounted() {
    this.fetchData(this.currentPage); // 初始化数据
  },
};
</script>

<style scoped>
/* 自定义样式 */
</style>

后端接口示例

确保你的后端 API 可以处理如下的 GET 请求，并返回相应的数据：

GET /api/items?page=1&limit=10

示例响应：

{

  "totalItems": 50,

  "items": [

       { "id": 1, "name": "Item 1" },

       { "id": 2, "name": "Item 2" }

       // 更多项

    ]

}