vue中前端分页的实现

查看代码

<template>
   <el-pagination
    layout="prev, pager, next"
    :page-size.sync="pager.pageSize"
    :current-page.sync="pager.currentPage"
    :total="total">
   </el-pagination>
</template>
<script>
data() {
    return {
      pager: {
        currentPage: 1,
        pageSize: 5,
      },
    };
  },

computed: {
    // 分页
    pageOrgData() {
      const start = (this.pager.currentPage - 1) * this.pager.pageSize;
      const end = this.pager.currentPage * this.pager.pageSize;
      return this.pageOrgData.slice(start, end);
    },
  },
methods:{
    // 数据排序值
    setColumnIndex(scope, pager) {
      return (scope.$index + 1) + (pager.currentPage - 1) * pager.pageSize;
    },
}
</script>