vue表格如何实现分页
Vue 表格分页实现方法
在 Vue 中实现表格分页通常需要结合前端分页逻辑和后端 API 支持。以下是两种常见实现方式：
前端分页实现（适合数据量较小的情况）
安装依赖（如使用 Element UI）：
npm install element-ui代码示例：
<template>
<div>
<el-table :data="currentPageData" border>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 所有数据
currentPage: 1,
pageSize: 10,
total: 0
}
},
computed: {
currentPageData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.tableData.slice(start, end)
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val
}
}
}
</script>后端分页实现（推荐大数据量场景）
API 请求示例：
methods: {
fetchData() {
const params = {
page: this.currentPage,
size: this.pageSize
}
axios.get('/api/data', { params })
.then(res => {
this.tableData = res.data.list
this.total = res.data.total
})
},
handleCurrentChange(val) {
this.currentPage = val
this.fetchData()
}
}自定义分页组件实现
核心逻辑：
function paginate(array, pageSize, pageNumber) {
return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)
}模板部分：
<div v-for="item in paginatedData">{{ item.name }}</div>
<button @click="prevPage">上一页</button>
<span>第{{ currentPage }}页</span>
<button @click="nextPage">下一页</button>关键注意事项
- 大数据量（超过 1000 条）建议使用后端分页
- 分页组件应显示总页数和当前页码
- 添加 loading 状态提升用户体验
- 考虑添加每页显示条数选择器
以上方法可根据具体项目需求选择使用，Element UI 和 Ant Design Vue 等组件库已提供成熟的分页组件，可直接集成使用。
