vue+eleemnt-ui 对table的数据--数组实现伪分页

时间：2020-06-04 16:07:26 阅读：72 评论：0 收藏：0 [点我收藏+]

HTML代码

<el-pagination

:current-page="pageNum"

:total="total"

:page-size="pageSize"

layout="total, prev, pager, next, jumper"

@current-change="bannerGoPage"

JS代码

data() {

　　return{

　　　pageNum: 1,

pageSize: 5,

total: null,

　　　bannerData: [], // 分页数据

bannerDataList: [], // 全部数据

　　}

----------------

bannerGoPage(currentPage) {

this.pageNum = currentPage

this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)

tableData() { //例如从接口请求回来的 table的data数据

　---省略接口---

this.bannerDataList = this.form.materialList // 接回全部数据

this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize) //进行对数据进行分页处理

this.total = this.bannerDataList.length

}

//如果table有删除操作

handleRemove(index, data) {

const idx = index + (this.pageNum - 1) * this.pageSize // 获取下标

this.bannerDataList.splice(idx, 1) // 删除操作

this.total = this.bannerDataList.length

this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize) // 进行分页处理

if (this.bannerData.length === 0) {

　　his.bannerGoPage(this.pageNum - 1)

　}

原文：https://www.cnblogs.com/2001-/p/13042341.html

踩

(0)

评论一句话评论（0）

分享档案

更多>