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);
}
