用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui分页组件:
以下代码都是干货,欢迎大家互相评论学习
方法一 数据绑在div上:
<template>
<div>
<div v-for="(value,index) in info.slice((currentPage-1)*pagesize,currentPage*pagesize)">
<!-- slice((currentPage-1)*pagesize,currentPage*pagesize 是写分页的最重要的一句话-->
<!--此处写需要循环的内容-->
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange" //currentPage改变时会触发
:current-page="currentPage"
:page-size="pagesize" //每页多少条数据
layout="total,prev, pager, next, jumper"
:total="info.length"> //total总共多少条数据
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
currentPage:1, //初始页
info:[],//数据
pagesize:5,//每页多少数据
currentPage:1 //默认当前页为第一页
}
},
methods:{
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
console.log(this.currentPage) //点击第几页
},
},
mounted(){ //如果使用数据接口的话,用这段代码
<!-- axios.get('/api',{
params:{
//请求参数
}
}).then(res => {
this.info = res.data //赋值
}) --!>
}
}
</script>
方法二 数据绑在el-table上: ( 小demo,可以直接运行)
<!--分页功能-->
<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>
<script>
export default {
data () {
return {
currentPage:1, //初始页
pagesize:10, //每页的数据
userList: []
}
},
mounted() {
console.log("页面加载",)
},
created() {
this.handleUserList()
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)