1.在main.js中注册
import ElementUI from 'element-ui' //element ui
import 'element-ui/lib/theme-chalk/index.css' //css样式
Vue.use(ElementUI, {size:"small"}); //挂载
2.在你所需要分页的页面进行代码编写
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
style="float: right"
>
</el-pagination>
// :data="tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)" 绑定数据的改变
<div id="content">
<el-table :data="tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)" style="width: 100%">
...
</el-table>
</div>
methods中的代码da
methods :{
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize = val;
// 注意:在改变每页显示的条数时,要将页码显示到第一页
this.currentPage = 1;
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage = val;
},
},
data的代码
data() {
return {
tableData: [
],//所要分页的数据
currentPage: 1,
// 总条数
totalCount: 1,
// 个数选择器,选择一页显示几条
pageSizes: [10,20,30],
// 默认每页显示的条数
PageSize: 10,
};
},