最近公司做项目遇到返回的数据量太大，导致浏览器一下子渲染不出来，有时候还可能造成浏览器崩溃。

为了缓解浏览器的压力，采用elment 的table + vue在前端实现了一个简单的分页功能，做完之后，情况有所缓解

table部分，注意data的设置

<el-table 
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
border >
     <el-table-column type="index"></el-table-column>
     <el-table-column prop="type" label="字典类型"></el-table-column>
     <el-table-column prop="name" label="字典名称"></el-table-column>
     <el-table-column prop="code" label="字典代码"></el-table-column>
</el-table>

这里是elmenet分页组件

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="pagesize"
:total="tableData.length"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

vue 中return 设置默认值，否则就会设置对了出现数据

pagesize:20,//默认分页每页数据量
currentPage:1,//默认展示第一页数据

这里是methods方法

methods: {
        handleSizeChange: function(val) {
            this.pagesize = val;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        },
    }

设置完就好了。
自己请求一次数据给tableData值就好了