当前位置：首页 > VUE

vue实现后台分页

2026-01-15 03:22:38VUE

Vue 实现后台分页的方法

分页组件与数据绑定

在 Vue 中实现后台分页通常需要结合分页组件和后端 API。使用 el-pagination（Element UI）或自定义分页组件，通过 v-model 绑定当前页码和每页条数。

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    @current-change="handlePageChange"
    @size-change="handleSizeChange"
  />
</template>

数据请求与参数传递

分页参数需通过 API 传递给后端。常见的参数包括 currentPage（当前页）和 pageSize（每页条数）。使用 axios 或 fetch 发送请求时，将参数拼接到 URL 或请求体中。

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.dataList = response.data.list;
      this.total = response.data.total;
    });
  }
}

处理分页事件

分页组件触发的事件（如页码改变、每页条数改变）需更新参数并重新请求数据。

methods: {
  handlePageChange(page) {
    this.currentPage = page;
    this.fetchData();
  },
  handleSizeChange(size) {
    this.pageSize = size;
    this.fetchData();
  }
}

后端接口要求

后端接口需支持分页参数，返回数据格式通常包含列表数据（list）和总条数（total）。例如：

vue实现后台分页

{
  "list": [...],
  "total": 100
}

完整示例代码

<template>
  <div>
    <el-table :data="dataList">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then(response => {
        this.dataList = response.data.list;
        this.total = response.data.total;
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    }
  }
};
</script>