首先main.js中引入elementUI 见官方文档
因为我做的项目后台没有写分页 所以需要我自己做一个分页功能
html
<el-table show-header border :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)">
<el-table-column
label="标题"
max-height="550"
align="center">
<template slot-scope="scope">
{{scope.row.title}}
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top:20px;"
@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="list.length">
</el-pagination>
data中变量
list : [{
title : "1",
},{
title : "1",
},,{
title : "1",
},{
title : "1",
},{
title : "1",
}],//数据
currentPage : 1, //初始页
pagesize : 5, //每页的数据
methods中方法
handleSizeChange: function (size) {//选择条数
this.pagesize = size;
//console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentPage){//换页
this.currentPage = currentPage;
//console.log(this.currentPage) //点击第几页
},