Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页

Vue+Element-UI 实现前端分页功能，利用el-table和el-pagination组件实现表格前端分页：

        当table的数据量比较大的时候，一个屏幕展示不出全部的数据，这个时候就需要分页显示。而多数情况下都是做的后端分页，就是将分页参数和查询条件一并传到后端，后端将当前页要显示的数据返回来。但是有时候会遇到后端也是去调用了其它系统的接口，这时候返回到前端的是所有的数据，此时需要前端自行去进行分页显示。今天抽空写了个demo，效果如下：

有朋友要用el-table组件做前端分页的时候可以参考以下代码：

<template>

  <div class="paging">

    <div class="box_body">

      <el-table :data="tableData" border size="small" style="width: 100%">

        <el-table-column

          label="序号"

          prop="num"

          min-width="150"

        ></el-table-column>

        <el-table-column

          label="姓名"

          prop="name"

          min-width="150"

        ></el-table-column>

        <el-table-column

          label="性别"

          prop="sex"

          min-width="150"

        ></el-table-column>

        <el-table-column

          label="年龄"

          prop="age"

          min-width="150"

        ></el-table-column>

      </el-table>

      <!--===分页=====-->

      <el-pagination

        :current-page="pageinfo.page"

        :page-sizes="[10, 20, 30, 40]"

        :page-size="pageinfo.size"

        layout="total, sizes, prev, pager, next, jumper"

        :total="pageinfo.total"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        style="margin-bottom: 3px"

      ></el-pagination>

    </div>

  </div>

</template>

<script>

export default {

  name: "paging",

  data() {

    return {

      // 从后端获取到的所有表格数据

      sourceTableData: [],

      // 页面要显示的表格数据

      tableData: [],

      // 分页信息

      pageinfo: {

        page: 1,

        size: 10,

        total: 0,

      },

    };

  },

  created() {

    // 页面初始化时生成100条数据，模拟从后端获取所有数据

    let arr = [];

    for (let i = 0; i < 100; i++) {

      let obj = {};

      obj.num = i + 1;

      obj.name = "name" + (i + 1);

      obj.sex = Math.round(Math.random()) == 0 ? "男" : "女";

      obj.age = 20 + Math.round(Math.random() * 30);

      arr.push(obj);

    }

    this.sourceTableData = arr;

    // 初始化算出第一页数据

    this.tableData = this.currentChangePage(

      this.pageinfo.size,

      this.pageinfo.page

    );

    this.pageinfo.total = this.sourceTableData.length;

  },

  methods: {

    /** 切换每页显示条数 */

    handleSizeChange(val) {

      this.pageinfo.page = 1;

      this.pageinfo.size = val;

      this.tableData = this.currentChangePage(val, this.pageinfo.page);

    },

    /** 切换分页 */

    handleCurrentChange(val) {

      this.pageinfo.page = val;

      this.tableData = this.currentChangePage(this.pageinfo.size, val);

    },

    // 分页方法(用于表格数据后端不分页，放到前端做分页)

    currentChangePage(size, current) {

      const tablePush = [];

      let array = JSON.parse(JSON.stringify(this.sourceTableData));

      array.forEach((item, index) => {

        if (size * (current - 1) <= index && index <= size * current - 1) {

          tablePush.push(item);

        }

      });

      return tablePush;

    },

  },

};

</script>

<style>

.paging {

  width: 100%;

  height: 100%;

}

.box_body {

  width: 1200px;

  margin: 50px auto;

}

</style>