vue 模拟分页

写在最前：
从现实角度来说，肯定是真分页才有现实的价值，但是假分页也很重要。
真分页就是每次前端请求，后端拿到请求去调用接口查询数据库。

假分页就是前端一次请求，后端一次性查询返回所有页数，之后前端的请求全从之前拿到的里面分批给前端页面。

小声bb:一般来说，分页效果肯定是后端接口提供，如果后端不愿意提供，那你可以买一杯奶茶请他喝掉然后揍shi祭天了。
复制代码

当然肯定有特殊情况需要前端自己写分页：比如前端导入excel到表格中，这时候无法请求后端给你带分页的接口，这时候你前端的增删改查全部都要用js模拟出来，然后保存的结果再去请求后端接口保存在数据库。

下面分享js模拟分页思路：

以avue框架为例，亲测有效，首先获取全部数据，然后循环判断当前页有多少条数据，然后截取相应页的数据给当前页表格

那么分页会出现两种情况：

• 总条数total > 当前页数据条数pageSize => 截取对应条数据给table
• 总条数total < 当前页数据条数pageSize => 把所有数据都给表格table

//直接上代码
<template>
  <div class="orderSaveResult">
          <avue-crud :data="notSaveTable.data" :option="notSaveTable.option" :page.sync="notSaveTable.page"
                     @on-load="notSaveTableOnload"
                     @current-change="notSaveTableCurrentChange"
                     @size-change="notSaveTableSizeChange"
          >
          </avue-crud>
  </div>
</template>

<script>
import notSaveTable from './const/notSaveTable'

export default {
  name: "orderSaveResult",
  data() {
    return {
      notSaveTable,
      notSaveTableData: [],
    }
  },

  created() {
    if (sessionStorage.getItem('setOrderData')) {
      if (data) {
        this.notSaveTable.data = data.notSaveList
        this.notSaveTable.page.total = data.notSaveList.length
        this.notSaveTableData = data.notSaveList
      }
    }
  },

  methods: {
    notSaveTableOnload(page) {
      let val = page
      //表格onLoad函数，页面第一次渲染会传过来page对象，先判断一下如果是对象默认显示第一页，否则就是切换分页传过来的页码值
      if (page.toString() == '[object Object]') {
        val = 1
      }
      this.notSaveTable.data = []
      //分页js
      for (var i = this.notSaveTable.page.pageSize * (val - 1); i < ((this.notSaveTable.page.total > this.notSaveTable.page.pageSize * val) ? (this.notSaveTable.page.pageSize * val) : (this.notSaveTable.page.total)); i++) {
      }
      this.notSaveTable.data = this.notSaveTableData.slice(this.notSaveTable.page.pageSize * (val - 1), i)
    },
    
    notSaveTableCurrentChange(page) {
      console.log(page)
      this.notSaveTable.page.currentPage = page
      this.notSaveTableOnload(this.notSaveTable.page.currentPage)
    },

    notSaveTableSizeChange(size) {
      this.notSaveTable.page.currentPage = 1
      this.notSaveTable.page.pageSize = size
      this.notSaveTableOnload(this.notSaveTable.page.currentPage)
    },
  }
}
</script>

复制代码