当前位置：首页 > VUE

vue中实现分页查询

2026-02-22 06:53:57VUE

vue中实现分页查询的方法

在Vue中实现分页查询通常需要结合前端分页组件和后端API接口。以下是常见的实现方式：

使用Element UI的分页组件

安装Element UI后，可以直接使用其分页组件：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 调用API接口获取数据
      api.getList({
        page: this.currentPage,
        size: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

自定义分页组件实现

如果不使用UI框架，可以自定义分页组件：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>第{{ currentPage }}页/共{{ totalPages }}页</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: {
    total: Number,
    pageSize: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    prevPage() {
      this.$emit('page-change', this.currentPage - 1)
    },
    nextPage() {
      this.$emit('page-change', this.currentPage + 1)
    }
  }
}
</script>

后端API接口配合

前端需要与后端API配合实现完整分页功能。典型的分页请求参数包括：

page：当前页码
size：每页记录数

后端返回数据通常包含：

list：当前页数据
total：总记录数
pages：总页数

前端分页处理

对于少量数据，也可以在前端进行分页处理：

// 前端分页计算
getPaginatedData() {
  const start = (this.currentPage - 1) * this.pageSize
  const end = start + this.pageSize
  return this.allData.slice(start, end)
}

分页与表格结合

分页通常与表格组件一起使用：

vue中实现分页查询

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

以上方法可以根据具体项目需求选择使用，Element UI的分页组件提供了丰富的功能和样式，适合大多数场景。自定义分页组件则提供了更大的灵活性。无论哪种方式，都需要注意与后端API的配合和数据同步更新。