vue实现后台分页
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）。例如：
{
"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>注意事项
- 分页参数需与后端约定一致，如
page和size或currentPage和pageSize。 - 首次加载时需主动调用
fetchData，通常在created或mounted钩子中执行。 - 分页组件的
total属性需根据后端返回的总条数更新。
