vue--》分页效果（前端实现）
<template>
<div>
<el-table style="width: 100%;" :data="ary">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column label="编号" prop="age" width="180"></el-table-column>
<el-table-column label="用户姓名" prop="name" width="180"></el-table-column>
<el-table-column label="爱好" prop="like" width="180"></el-table-column>
</el-table>
<div class="block">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="pageList"
layout="total, prev, pager, next"
:total="total"
@click.native="pageFunction()"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "home",
components: {},
data() {
return {
list: [
{
name: "a213",
age: 12342,
like: "play code"
},
{
name: "aewr",
age: 18,
like: "play code"
},
{
name: "ewra",
age: 18,
like: "play code"
},
{
name: "reta",
age: 18,
like: "play code"
},
{
name: "fdgdfga",
age: 18,
like: "play code"
},
{
name: "dfgdfga",
age: 18,
like: "play code"
},
{
name: "cvbvca",
age: 18,
like: "pvcblay code"
},
{
name: "a",
age: 18,
like: "play code"
},
{
name: "vcbda",
age: 18,
like: "play code"
},
{
name: "sdbvcba",
age: 18,
like: "play code"
},
{
name: "bvna",
age: 18,
like: "play code"
},
{
name: "bvna",
age: 18,
like: "play code"
},
{
name: "bvna",
age: 18,
like: "play code"
}
],
pageList: 5,
currentPage1: 1,
total:13,
ary:[]
};
},
methods: {
handleCurrentChange(val) {
this.currentPage1 = val;
//alert(this.currentPage1)
},
handleSizeChange: function(size) {
this.pageList = size;
console.log(this.pageList); //每页下拉显示数据
},
tablePagination() {
/**
* 表格数据分页的方法
*/
let array = [],
startNum = 0,
endNum = 0;
this.total = this.list.length;
startNum = (this.currentPage1 - 1) * this.pageList;
if (this.currentPage1 * this.pageList < this.total) {
endNum = this.currentPage1 * this.pageList;
} else {
endNum = this.total;
}
array = this.list.slice(startNum, endNum);
this.ary = array
console.log(startNum,endNum)
console.log(this.currentPage1)
},
pageFunction(){
this.tablePagination()
}
},
//创建后先调用一下方法，做数据的请求
created(){
this.tablePagination()
}
};
</script>
<style scoped>
.itemList {
display: flex;
justify-content: space-around;
}
</style>
