Vue结合Element实现分页功能（这里是假分页，即假数据，真实中应从后台获取）。
下面来看看具体的实现吧！
1.使用Element中的Table表格和Pagination分页两个组件。
//:data="tableData", tableData是表格数据的数组
<div class="wrapper">
<el-table
border
:data="indexResultsTable"
style="width: 100%"
id="out-table">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="商品ID" width="100"></el-table-column>
<el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip></el-table-column>
<el-table-column prop="price" label="商品价格" width="100"></el-table-column>
<el-table-column prop="number" label="商品数量" width="100"></el-table-column>
<el-table-column prop="category" label="商品类目" width="100"></el-table-column>
<el-table-column prop="image" label="商品图片" show-overflow-tooltip></el-table-column>
<el-table-column prop="sellPoint" label="商品卖点" show-overflow-tooltip></el-table-column>
<el-table-column prop="descs" label="商品描述" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
//分页
//pager-count 当前页数
//total 总条目数
//page-size 每页显示条目个数
<div class="contain">
<el-pagination
background
layout="total,prev, pager, next,jumper"
:current-page="currentPage"
:total="total"
:page-size="pageSize"
></el-pagination>
</div>
2.定义变量
data(){
return {
currentPage:1, //初始页
total:10, //分页总条数
pageSize:1, //每页的数据
indexResultsTable:[], //保存处理分页数据的空数组
tableData:[{
id:1,
title:'平底锅',
price:110,
number:13,
category:'厨具',
image:require('../../assets/img/guo.png'),
sellPoint:'不粘,无油烟',
descs:'卡罗特麦饭石不粘锅平底锅,煎牛排、鸡蛋，性价比高，轻巧锅身'
},
{
id:2,
title:'空调',
price:110,
number:13,
category:'家电',
image:require('../../assets/img/kongtiao.png'),
sellPoint:'智能调节,自清洁,独立除湿',
descs:'一级能效,变频节能低噪'
},{
id:3,
title:'洗衣机',
price:2299,
number:32,
category:'家电',
image:require('../../assets/img/xiyiji.png'),
sellPoint:'滚筒，变频，一级能效',
descs:'除菌除螨，除菌'
},
{
id:4,
title:'联想拯救者',
price:7299,
number:21,
category:'数码',
image:require('../../assets/img/computer.png'),
sellPoint:'独立显卡，165Hz',
descs:'酷睿i5，15.6英寸接口丰富'
},
{
id:5,
title:'Redmi K50',
price:2499,
number:21,
category:'数码',
image:require('../../assets/img/k50.png'),
sellPoint:'天玑8100,2K柔性直屏,OIS光学防抖,67W快充,5500mAh大电量',
descs:'天玑8100,4800万像素,12GB'
},
{
id:6,
title:'联想小新pro16',
price:6299,
number:21,
category:'数码',
image:require('../../assets/img/pro16.png'),
sellPoint:'独立显卡，165Hz',
descs:'酷睿i5，15.6英寸接口丰富'
},
{
id:7,
title:'电脑',
price:7299,
number:21,
category:'数码',
image:require('../../assets/img/computer.png'),
sellPoint:'独立显卡，165Hz',
descs:'酷睿i5，15.6英寸接口丰富'
},{
id:8,
title:'电脑',
price:7299,
number:21,
category:'数码',
image:require('../../assets/img/computer.png'),
sellPoint:'独立显卡，165Hz',
descs:'酷睿i5，15.6英寸接口丰富'
}]
}
}
此时就能在页面上看到效果。
3.定义分页的处理方法。
methods:{
handleSizeChange(size){
console.log(size)
this.pageSize = size;
this.getList();
},
handleCurrentChange(page){
console.log(page)
this.currentPage = page;
this.getList();
if(this.indexResultsTable.length === 1){
this.currentPage = 1;
}
},
//前端自己分页
getList() {
// es6过滤得到满足搜索条件的展示数据list
let list = this.tableData.filter((item, index) =>
item.title.includes(this.input)
)
this.indexResultsTable = list.filter((item, index) =>
index < this.currentPage * this.pageSize && index >= this.pageSize * (this.currentPage - 1)
)
this.total = list.length;
}
}
4.在分页组件上面加上两个事件。
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
<!-- 分页 -->
<div class="contain">
<el-pagination
background
layout="total,prev, pager, next,jumper"
:current-page="currentPage"
:total="total"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</div>
以为这就完了吗，你会发现效果怎么没出来呢？
还需要做最后的处理，因为处理分页数据方法 getList() 是定义在 methods 中的，调用才能生效，不然获取不到数据，在生命周期中 mounted 调用 this.getList(); 同时呢，把表格绑定的数据 tableData 替换成保存处理分页数据的数组 indexResultsTable ，这样最终的分页效果就实现了。
