Vue.js备忘录——分页展示

       在工作中，后台传过来的数据辣么多，想要展示在一屏上面显然是不够明智的，因而分页变成了不可或缺的一个功能。下面是我在分页的时候的一个基本模版，一起来看下吧！

环境：

       我是用webpack模板搭建的vue项目，结合了element-UI。（搭建安装方法网上有炒鸡多，各位自己去找到适合自己的吧）

       vue版本：2.9.6

代码：

写在<template>标签中的html代码段： 

<div>
    <!-- 这里绑定的data数据是原data数据经过slice函数的切段得到的子数组 -->
    <el-table :data="data.slice(this.pagination.pageSize * (this.pagination.current - 1), this.pagination.pageSize * this.pagination.current)">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <div>
      <!-- 这边el-pagination中的属性可以去element-UI的官方文档去查看 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="data.length"
      ></el-pagination>
    </div>
</div>

写在<script>标签中的JavaScript代码段：

export default {
  data() {
    return {
      pagination: {   //有关分页的属性放在了一个对象中
        pageSize: 2,
        current: 1,
      },
      data: [
        {
          id: 1,
          name: "A"
        },
        //这里的数据可以随便加，一般情况下这里的数据都是后台通过接口传过来的
      ]
    };
  },
  methods: {
    handleSizeChange() {},
    //每当点击分页栏时触发的函数：作用是更新分页信息。
    handleCurrentChange(val) {
      this.pagination = {
        current: val,         //记录你当前页面，通过点击分页页码传入值
        order: 1,             //排序的顺序
        pageSize: 2,          //每页放几条数据
        sort: "id",           //排序的依据
        totalElements: 5      //数据总条数
      };
    }
  }
};

分析：

       分页的实质其实就是将一个大集合按照一定的规则分成一些小的集合并且展示到页面上。在这边，我们通过利用分页的属性current（当前页面）和pageSize（每页显示条目数量）来对数组data进行切分 ，并渲染在table上。

注：1.<style>标签中的样式可以自行修改。

       2.参考网址：Pagination 分页：https://element.eleme.cn/#/zh-CN/component/pagination

                            Table 表格：https://element.eleme.cn/#/zh-CN/component/table

 

 

***另，本文均为个人见解，如果有更好的解决方法，或者说有错误，还请各位海涵并指正，谢谢！***