1.将element-ui里面的组件引入过来以及事件
2.绑定自己想要的数据(一般数据是与table结合)
3.将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="list.length"
></el-pagination>
currentPage: 1, //初始页
pagesize: 20, // 每页的数据
total: 0, // 总共的条数
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
},
- list是获取到的数据,将获取到的数据通过slice的方式切割我们想要展示在表格上的数据
<el-table
style="width: 100%;"
:data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
>
<el-table-column label prop width="50">
<input type="checkbox" />
</el-table-column>
<el-table-column label prop width="50">
<template slot-scope="scope">
<img :src="scope.row.avatar" alt />
</template>
</el-table-column>
<el-table-column label="学生名称" prop="nickname" width="180"></el-table-column>
<el-table-column label="手机号" prop="mobile" width="180"></el-table-column>
<el-table-column label="状态" prop="status" width="180"></el-table-column>
<el-table-column label="创建时间" prop="created_at" width="200"></el-table-column>
<el-table-column label="操作">详情-编辑-禁用-删除-重置密码</el-table-column>
</el-table>