中国网站建设市场规模seo免费工具

一些接口不分页的数据列表，一次性返回大量数据会导致前端渲染卡顿，接口不做分页的情况下前端可以截取数据来做分页
以下是一个例子，被截取的列表和全量数据在同一个栈内存空间，所以如果有表格内的表单编辑，新的值也会事实同步到大列表，所以无需做特殊处理

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);}},