以下是使用
ElementUI 中的
el-pagination 实现的纯
前端分页
代码：
```html
<template>
<div>
<!-- 显示当前页数据 -->
<ul>
<li v-for="item in currentPageData">{{ item }}</li>
</ul>
<!-- 分页器 -->
<
el-pagination
v-show="total > pageSize"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 总数据量
total: 50,
// 每页显示的条数
pageSize: 10,
// 当前页数
currentPage: 1,
// 当前页的数据
currentPageData: []
};
},
computed: {
// 计算总页数
totalPage() {
return Math.ceil(this.total / this.pageSize);
}
},
methods: {
// 处理页数改变事件
handleCurrentChange(newPage) {
this.currentPage = newPage;
this.getCurrentPageData();
},
// 获取当前页的数据
getCurrentPageData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
this.currentPageData = this.allData.slice(start, end);
}
},
mounted() {
// 所有数据
this.allData = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12', '数据13', '数据14', '数据15', '数据16', '数据17', '数据18', '数据19', '数据20', '数据21', '数据22', '数据23', '数据24', '数据25', '数据26', '数据27', '数据28', '数据29', '数据30', '数据31', '数据32', '数据33', '数据34', '数据35', '数据36', '数据37', '数据38', '数据39', '数据40', '数据41', '数据42', '数据43', '数据44', '数据45', '数据46', '数据47', '数据48', '数据49', '数据50'];
// 初始化当前页的数据
this.getCurrentPageData();
}
};
</script>
```
在这段
代码中，我们使用了
ElementUI 中的
el-pagination 组件来实现分页器的功能。在模板中，我们使用 v-for 指令来循环显示当前页的数据，并使用
el-pagination 组件来显示分页器。在脚本中，我们定义了一些数据和方法来实现分页的逻辑，其中 getCurrentPageData 方法用于获取当前页的数据。在 mounted 钩子函数中，我们初始化了所有数据，并将当前页的数据设置为第一页的数据。
5900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
