后台一次返回的数据量很大，需要展示全部数据时耗时非常长，对浏览器的压力非常大，因此可以改用前端分页的方式来展示数据，现在就来具体实现一下：
分页组件使用element-ui的<el-pagination></el-pagination>组件

一，template组件

<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageNo"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="data.length"
>
</el-pagination>

template组件如上代码所示，现在我们来看script部分

export default {
  name: 'Pager',
  data(){
    return {
      data: [],   //通过ajax拿到的数据
       pageNum: 1, //当前页
      pageSize: 10 //每页显示条目数
    }
  },
  computed: {
    AfterChangeData() {
        let start = (this.pageNo - 1) * this.pageSize;
        let end = this.pageNo * this.pageSize;
        return this.data.slice(start, end)
    }
  },
methods: {
      //分页大小改变
      handleSizeChange(val) {
        this.pageSize = val;
      },
      //当前页数改变
      handleCurrentChange(val) {
        this.pageNo = val;
     }
  }
}

重点在于计算属性中对数据的处理哦！

以上就是今天的总结。

最后是我司UI小姐姐专门给偶做的头像！哈哈