需求

对表格中的数据进行本地分页，不调用接口

分析

• html

<el-table fit :cell-style="{ textAlign: 'center' }" :data="tableData" style="width: 100%" height="350":header-cell-style="{background: '#f7f7f7',color: 'rgba(0,0,0,.85)','font-weight': '500','text-align': 'center'}" v-loading="loading"><el-table-column prop="originalPointName" label="观测点名称"></el-table-column><el-table-column prop="sectionName" label="位置"></el-table-column><el-table-column prop="x0" label="X0"></el-table-column><el-table-column prop="y0" label="Y0"></el-table-column><el-table-column prop="h0" label="H0"></el-table-column></el-table><el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="pagination.total"layout="prev, pager, next ,total" @current-change="handleCurrentChange" />

• data

// 表格数据
tableDatas: [],
tableData: [],pagination: {total: 0,currentPage: 1,pageSize: 10
},
loading: false

• methods

接口调用(){this.loading = falseconst key1 = this.tabList[0].namethis.tableDatas = res.data[key1]this.pagination.total = this.tableDatas.lengththis.handleCurrentChange(1)
}

)

// 页数切换handleCurrentChange (e) {this.pagination.currentPage = econst start = (this.pagination.currentPage - 1) * 10;const end = start + 10;this.tableData = this.tableDatas.slice(start, end);},