一些接口不分页的数据列表,一次性返回大量数据会导致前端渲染卡顿,接口不做分页的情况下前端可以截取数据来做分页
以下是一个例子,被截取的列表和全量数据在同一个栈内存空间,所以如果有表格内的表单编辑,新的值也会事实同步到大列表,所以无需做特殊处理
html
<el-table:data="tablePageData"><el-table-columnprop="code"label="编号"show-overflow-tooltip></el-table-column><el-table-columnprop="name"label="名称"show-overflow-tooltip></el-table-column></el-table><el-pagination:current-page.sync="tableParams.pageNum":page-size.sync="tableParams.pageSize"layout="total, sizes, prev, pager, next":page-sizes="[200]":total="tableData.length"/>
js
data() {return {// 全量数据列表tableData: [],tableParams: {pageNum: 1,pageSize: 200,},};},computed: {// 设置分页,直接放到data里截取会导致被拷贝的数据没有被定义,多选框无法被选中tablePageData() {return this.tableData.slice((this.tableParams.pageNum - 1) * this.tableParams.pageSize,this.tableParams.pageNum * this.tableParams.pageSize);}},