vue如何实现翻页

实现翻页的基本方法

在Vue中实现翻页功能通常需要结合分页组件和数据请求逻辑。使用第三方分页组件库如Element UI、Ant Design Vue等可以快速实现，也可以手动编写分页逻辑。

安装Element UI分页组件（如已安装可跳过）：

npm install element-ui

在Vue文件中引入分页组件：

import { Pagination } from 'element-ui';
Vue.use(Pagination);

模板中使用分页组件：

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

数据请求与分页绑定

分页组件需要与数据请求联动。通常在handleCurrentChange方法中处理页码变化，并重新请求数据。

定义数据与分页参数：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    listData: []
  };
}

实现页码变化处理：

methods: {
  handleCurrentChange(page) {
    this.currentPage = page;
    this.fetchData();
  },
  fetchData() {
    // 模拟API请求
    const params = {
      page: this.currentPage,
      size: this.pageSize
    };
    axios.get('/api/data', { params })
      .then(res => {
        this.listData = res.data.list;
        this.total = res.data.total;
      });
  }
}

手动实现简单分页

如果不使用第三方组件，可以手动实现分页功能。通过计算属性对数据进行分页处理。

定义分页计算逻辑：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.listData.slice(start, end);
  },
  totalPages() {
    return Math.ceil(this.listData.length / this.pageSize);
  }
}

模板中渲染分页按钮：

<div v-for="item in paginatedData" :key="item.id">
  {{ item.content }}
</div>
<button 
  v-for="page in totalPages" 
  :key="page"
  @click="currentPage = page">
  {{ page }}
</button>

分页样式与功能增强

为提升用户体验，可以添加分页样式和额外功能，如每页条数选择器、快速跳转等。

添加每页条数选择功能：

<select v-model="pageSize" @change="handleSizeChange">
  <option value="5">5条/页</option>
  <option value="10">10条/页</option>
  <option value="20">20条/页</option>
</select>

处理每页条数变化：

methods: {
  handleSizeChange(size) {
    this.pageSize = size;
    this.currentPage = 1;
    this.fetchData();
  }
}

服务端分页与前端分页选择

对于大数据量场景，建议使用服务端分页。前端只需传递页码和每页条数参数，由后端返回对应数据。

服务端分页请求示例：

fetchData() {
  axios.get('/api/data', {
    params: {
      page: this.currentPage,
      size: this.pageSize
    }
  }).then(res => {
    this.listData = res.data.items;
    this.total = res.data.totalCount;
  });
}

前端分页适用于数据量较小的情况，通过Array.slice()实现，无需额外请求：

paginatedData() {
  const start = (this.currentPage - 1) * this.pageSize;
  return this.allData.slice(start, start + this.pageSize);
}