在vue+elementUI中的分页功能
程序员文章站
2022-07-01 19:19:58
...
<template>
<!--分页功能-->
<div class="deit">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-date"></i> 数据管理
</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<div class="cantainer">
<el-table
style="width: 100%;"
:data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column label="日期" prop="date" width="180"></el-table-column>
<el-table-column label="用户姓名" prop="name" width="180"></el-table-column>
<el-table-column label="邮箱" prop="email" width="180"></el-table-column>
<el-table-column label="地址" prop="address" width="200"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="userList.length"
>
<!--//这是显示总共有多少数据,-->
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1, //初始页
pagesize: 5, // 每页的数据
userList: []
};
},
created() {
this.handleUserList();
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function(size) {
console.log(size)
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
},
handleUserList() {
// this.$http.get('http://localhost:3000/userList').then(res => { //这是从本地请求的数据接口,
// this.userList = res.body
// })
this.userList = [
{
date: "2016-05-03",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-02",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-01",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-08",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-07",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-08",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-08",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王小虎",
email: "adda",
address: "上海市普陀区金沙江路 1518 弄"
}
];
}
}
};
</script>
<style scoped>
</style>
属性
事件
更多
上一篇: Vue.js的生命周期
推荐阅读
-
在Python的Django框架中包装视图函数
-
在Django框架中编写Context处理器的方法
-
在Android中 获取正在运行的Service 实例
-
在Android中创建菜单项Menu以及获取手机分辨率的解决方法
-
Python中在for循环中嵌套使用if和else语句的技巧
-
在C#中 webbrowser的使用心得
-
PyQT实现菜单中的复制,全选和清空的功能的方法
-
在PYQT5中QscrollArea(滚动条)的使用方法
-
在ASP.NET 2.0中操作数据之六十:创建一个自定义的Database-Driven Site Map Provider
-
关于C# 5.0 CallerMemberName CallerFilePath CallerLineNumber 在.NET4中的使用介绍方法