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

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)

  　}

},