我以为所有页面都有分页接口 但是还真让我碰见了 记录一下
1.
// 获取数据
getSpecialMark() {
getAllSpecial().then(res => {
this.userTableData = res.result;
// this.userTableDatas = res.result;
this.total = this.userTableData.length
// console.log(this.specialMarkData);
})
},
正常引入数据
2.
<div class = "page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 3, 5, 10, 20]"
:page-size="pagesize"
:pager-count = "5"
layout=" prev, pager, next,total"
:total="total">
</el-pagination>
</div>
引入分页组件
事件名称 | 说明 | 回调参数 |
---|---|---|
size-change | pageSize 改变时会触发 | 每页条数 |
current-change | currentPage 改变时会触发 | 当前页 |
prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
data中
currentPage: 1, // 初始页
pagesize: 15, // 初始每页的数据
定义方法
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
// console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
// console.log(this.currentPage) //点击第几页
},
最后渲染到页面上
<el-table
:data="userTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
@row-click="rowClick" >