vue elementui实现分页
实现分页功能
使用Vue和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组件中实现分页逻辑：
<template>
<div>
<!-- 表格数据展示 -->
<el-table :data="currentPageData" border style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<!-- 分页控件 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 全部数据
currentPageData: [], // 当前页数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
total: 0 // 总数据量
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
// 模拟API请求获取数据
setTimeout(() => {
// 生成测试数据
this.tableData = Array.from({length: 100}, (_, i) => ({
id: i + 1,
name: `用户${i + 1}`,
age: Math.floor(Math.random() * 30) + 20
}))
this.total = this.tableData.length
this.updatePageData()
}, 500)
},
updatePageData() {
// 根据当前页码和每页大小更新显示数据
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.currentPageData = this.tableData.slice(start, end)
},
handleSizeChange(val) {
this.pageSize = val
this.updatePageData()
},
handleCurrentChange(val) {
this.currentPage = val
this.updatePageData()
}
}
}
</script>关键功能说明
el-pagination组件通过以下属性控制分页：
current-page: 绑定当前页码page-size: 绑定每页显示数量total: 绑定总数据量page-sizes: 可选的每页显示数量数组layout: 分页控件布局配置
事件处理：
@size-change: 每页显示数量变化时触发@current-change: 当前页码变化时触发
与后端API配合
实际项目中通常需要从后端API获取分页数据：
async fetchData() {
try {
const res = await axios.get('/api/data', {
params: {
page: this.currentPage,
size: this.pageSize
}
})
this.tableData = res.data.list
this.total = res.data.total
this.currentPageData = res.data.list
} catch (error) {
console.error(error)
}
}样式自定义
可以通过CSS覆盖默认样式：
.el-pagination {
margin-top: 20px;
text-align: right;
}以上实现提供了完整的分页功能，包括前端分页和与后端API配合两种模式，可根据实际需求选择使用。
