vue elementui实现分页
使用 Vue 和 Element UI 实现分页
Element UI 提供了 el-pagination 组件，可以方便地实现分页功能。以下是一个完整的实现示例：
安装 Element UI
确保项目中已安装 Element UI：
npm install element-ui -S引入 Element UI
在 main.js 中全局引入：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)实现分页组件
在 Vue 组件中使用 el-pagination：
<template>
<div>
<!-- 表格数据 -->
<el-table :data="currentTableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 全部数据
currentTableData: [], // 当前页数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
total: 0 // 总数据量
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
// 模拟从接口获取数据
setTimeout(() => {
this.tableData = [
{ date: '2023-01-01', name: '张三', address: '北京市' },
{ date: '2023-01-02', name: '李四', address: '上海市' },
// 更多数据...
]
this.total = this.tableData.length
this.updateCurrentTableData()
}, 500)
},
updateCurrentTableData() {
// 根据当前页码和每页条数更新显示的数据
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.currentTableData = this.tableData.slice(start, end)
},
handleSizeChange(val) {
this.pageSize = val
this.updateCurrentTableData()
},
handleCurrentChange(val) {
this.currentPage = val
this.updateCurrentTableData()
}
}
}
</script>关键点说明
current-page绑定当前页码page-size绑定每页显示条数total绑定总数据量@size-change监听每页条数变化@current-change监听页码变化layout定义分页器布局
后端分页实现
如果是后端分页，只需修改 fetchData 方法：
fetchData() {
const params = {
page: this.currentPage,
size: this.pageSize
}
axios.get('/api/data', { params }).then(res => {
this.currentTableData = res.data.list
this.total = res.data.total
})
}样式调整
可以通过 CSS 调整分页组件样式：
.el-pagination {
margin-top: 20px;
text-align: right;
}以上实现提供了完整的前端分页功能，同时也说明了如何与后端接口配合实现真正的分页查询。
