vue+elementui 前端分页

模板部分：

<template>
    <div>
       <el-table :data='dataShow'>
            ....  
       </el-table>
       <el-pagination 
            @size-change="handleSizeChange"  
            @current-change="handleCurrentChange"  
            :current-page="currentPage"  
            :page-sizes="[5, 10, 30]"
            :page-size="pageSize"  
            layout="total, sizes, prev, pager, next, jumper"  
            :total="total"> 
       </el-pagination>
    </div>
</template>

js部分：

export default {
    name:'index',
    data() {
        return {
            list:[], //后台页面数据，主要用来更新页面条数时传值
            total:0, //数据总数
            pageSize:10, //默认每页10条数据
            pageNum:1, //总页数，默认为1页
            totalPageData: [], //分页后的数据列表
            currentPage: 1, //当前页，默认为1
            dataShow:[], //最后根据totalPageData的下标展示当前页的数据
        }
    }
    mounted(){
        this.getList();
    }
    methods: {
        isEmpty,
        getList() {
            //后端请求的数据
            testList().then(response => {
                this.list = response.data
                this.total= response.data.length
                this.calcPageData(this.list,this.total)
            })
        },
        calcPageData(list,total) {
            // 计算总页数(根据后台数据的总数计算有几页,得0时设为1,因为不可能有第0页)
            if (total> this.pageSize) { //总数大于每页的数量才有必要计算
                this.pageNum = Math.ceil(total / this.pageSize) || 1;
            }
            // 数据分组
            for (let i = 0; i < this.pageNum; i++) {
                // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
                this.totalPageData[i] = list.slice(this.pageSize * i, this.pageSize * (i + 1));
            }
            // 获取到数据后显示第一页内容,数组下标是从0开始的，这里一定要减去1，不然会丢失一组数据
            this.dataShow = this.totalPageData[this.currentPage - 1];
        },
        // 当前页码currentPage发生变化
        handleCurrentChange(newPageNum) {
            this.currentPage = newPageNum;
            // 这里仍然不要忘记减去1
            this.dataShow = this.totalPageData[newPageNum - 1];
        },
        // 每页条数pageSize发生变化
        handleSizeChange(newPageSize) {
            this.pageSize = newPageSize;
       ​​​​​​​     // 重新计算页数并分组
            this.calcPageData(this.list,this.total);
        },
    }
}