当前位置：首页 > VUE

使用vue实现分页查询

2026-02-21 13:29:18VUE

使用 Vue 实现分页查询

基础实现思路

分页查询通常需要前端与后端配合完成。前端负责展示分页控件和当前页数据，后端负责根据页码和每页数量返回对应数据。

前端实现步骤

安装必要依赖 如果项目需要axios进行HTTP请求，可以通过npm安装：
```
npm install axios
```

创建分页组件 在Vue组件中定义分页相关数据：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    items: []
  }
}

获取分页数据方法 创建获取数据的方法，通常使用axios调用API：

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

监听分页变化 在组件中添加分页变化监听：
```
watch: {
  currentPage() {
    this.fetchData()
  }
}
```

模板部分 在模板中添加分页控件和数据展示：

<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <!-- 分页控件 -->
    <div class="pagination">
      <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="currentPage++" :disabled="currentPage * pageSize >= totalItems">下一页</button>
    </div>
  </div>
</template>

使用Element UI分页组件

如果项目使用Element UI，可以简化分页实现：

安装Element UI
```
npm install element-ui
```

使用分页组件

<template>
  <div>
    <el-table :data="items">
      <!-- 表格列定义 -->
    </el-table>

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

处理页码变化

methods: {
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

后端API要求

后端API需要支持分页参数，通常格式为：

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

返回格式示例：

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

完整示例代码

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      items: []
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/items', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      })
      .then(response => {
        this.items = response.data.items
        this.totalItems = response.data.total
      })
    }
  },
  watch: {
    currentPage() {
      this.fetchData()
    }
  }
}
</script>