vue elemennt实现分页
Vue Element 实现分页
在 Vue 项目中结合 Element UI 实现分页功能，可以通过 el-pagination 组件快速完成。以下是具体实现方法：
安装 Element UI
确保项目已安装 Element UI，若未安装，可通过以下命令安装：
npm install element-ui --save引入 Element UI
在 main.js 中全局引入 Element UI：
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-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>数据绑定与方法
在组件的 script 部分定义分页相关数据和方法：
<script>
export default {
data() {
return {
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
total: 100, // 总数据量
};
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.fetchData(); // 重新加载数据
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData(); // 重新加载数据
},
fetchData() {
// 模拟 API 请求，替换为实际接口调用
console.log(`加载数据：页码=${this.currentPage}, 每页条数=${this.pageSize}`);
},
},
created() {
this.fetchData(); // 初始化加载数据
},
};
</script>结合表格实现完整分页
若需与表格结合，可配合 el-table 使用：
<template>
<div>
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>动态加载数据
实际项目中通常通过 API 动态获取数据：
methods: {
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;
} catch (error) {
console.error('数据加载失败', error);
}
},
}自定义分页样式
通过 layout 属性自定义分页布局，例如仅显示页码和上下页按钮：
<el-pagination
layout="prev, pager, next"
:total="50">
</el-pagination>注意事项
total属性需设置为后端返回的总数据条数，而非总页数。- 分页事件（
size-change和current-change）会触发数据重新加载，需避免重复请求。 - 若数据为空，可通过
hide-on-single-page属性隐藏分页组件。
