vue elementui实现分页
Vue + ElementUI 分页实现方法
安装与引入
确保已安装 ElementUI，可通过 npm 或 yarn 安装：
npm install element-ui在 main.js 中全局引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);基础分页组件
使用 <el-pagination> 组件实现分页：
<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
@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>数据与逻辑处理
在 Vue 实例中定义分页相关数据和方法：
<script>
export default {
data() {
return {
tableData: [], // 原始数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0, // 总数据量
currentPageData: [] // 当前页数据
};
},
methods: {
// 获取分页数据（模拟API请求）
fetchData() {
// 模拟异步请求
setTimeout(() => {
this.tableData = Array.from({length: 100}, (_, i) => ({
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();
}
},
mounted() {
this.fetchData();
}
};
</script>后端分页对接
实际项目中通常需要对接后端分页接口：
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);
}
}
}样式自定义
可通过 CSS 调整分页组件样式：
<style scoped>
.el-pagination {
margin-top: 20px;
text-align: right;
}
</style>功能扩展
实现带搜索的分页：
<el-input v-model="searchQuery" placeholder="搜索..." @change="handleSearch"></el-input>methods: {
handleSearch() {
this.currentPage = 1;
this.fetchData();
}
}
