Vue+Element UI实现纯前端分页

思路：我们在请求后端拿到的数据往往有很多条，这时候我们就希望通过分页让页面上只展示某部分数据

如何展示某部分数据呢？

既然是分页，那么必定会涉及到两个东西：
一、每一页的数据条数，设它为pageNum
二、当前页，就是当前页是第几页，设它为currentPage

那么我们就可以根据这两个变量进行计算，计算什么呢？

计算出当前要展示的是从第几条数据开始(设它为start)，到第几条数据结束(设它为end)

开始和结束位置都知道就好办了，只需要从后端返回的数据进行切割，拿到我们想展示的某部分数据，渲染到页面中就好啦

下面看一下我的代码
这里是我的html部分

<div class="content-item" v-for="item of afterChangeData" :key="item.id">
  <div class="item-top">
    <span class="item-title">{{item.title}}</span>
  </div>
  <div class="item-profile">
   {{item.content}}
  </div>
</div>	

这里是我的JS部分

<script>
export default {
  name: 'ListPage',
  // articleList 是从父组件传递过来的数据
  props: ['articleList', 'noData'],
  data () {
    return {
      currentList: [],
      currentPage: 1 // 默认显示第一页
    }
  },
  computed: {
  //写在computed里面，每次currentPage发生改变就会执行一次
    afterChangeData () {
      let start = (this.currentPage - 1) * 6
      let end = this.currentPage * 6
      return this.articleList.slice(start, end)
    }
  },
  methods: {
    // 当前页数改变
    handleCurrentChange (val) {
      console.log(val)
      this.currentPage = val
    }
  }
}
</script>

这是我实现的效果
第一页

第二页

核心代码就是这里的几句

  let start = (当前页 - 1) * 数据条数
  let end = 当前页 * 数据条数
  return this.articleList.slice(start, end)

参考网址：https://www.jianshu.com/p/f8b818405013?utm_campaign=hugo