vue Element模板el-pagination前端分页
el-pagination前端分页1、安装需要的包2、引入包3、html3、javascript平静的一天,后端又给我整活了,因为数据量太大,后端拒绝进行分页,要求前端分页,好吧,开整1、安装需要的包yarn add lodash或npm i --save lodash2、引入包import * as _ from 'lodash';3、html<el-table:data="detailL
·
el-pagination前端分页
1、安装需要的包
yarn add lodash 或
npm i --save lodash
2、引入包
import * as _ from 'lodash';
3、html
<el-table
:data="detailList"
style="width: 100%;">
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
3、javascript
//展示数据
getDetailList() {
this.detailList = []
this.$http({
url: '/',
method: 'post',
timeout: 300000,
data: this.searchForm,
}).then(({res}) => {
//获取后端传来的所有数据
this.allDetailList = res.data
//按默认每页数把所有数据进行划分
this.pageLists=_.chunk(this.allDetailList, 10)
//默认先展示第一页
this.detailList=this.pageLists[0]
this.totalPage = res.total
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.pageLists=_.chunk(this.allDetailList, val)
this.detailList=this.pageLists[0]
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.detailList=this.pageLists[val-1]
},
更多推荐
已为社区贡献2条内容
所有评论(0)