elementui table 分页
场景:每次写前端table分页总是感觉从头来学一遍似的,记录下直接抄
template部分
tooltip content="描述当前接口" placement="right-end" effect="light" > <span style="{display:inline-block;font-weight: bold;color:rgb(70,130,180);}" >偏高接口 table :data="highTableData" border :header-cell-style="{ color: 'rgb(114,143,172)', 'text-align': 'center' }" style="width: 100%" > column prop="interfaceName" label="接口名" width="300" /> column prop="peakRT" label="peakrt" width="180" align="right" :formatter="formatDecimalPoint" /> column prop="pressRT" label="pressrt" width="180" align="right" :formatter="formatDecimalPoint" /> pagination :current-page="highCurrentPage" :page-sizes="pageSizes" :page-size="highPageSize" layout="total, sizes, prev, pager, next, jumper" :total="highTotal" @size-change="handleSizeChangeHigh" @current-change="handleCurrentChangeHigh" />
script代码,如果后端已经做好了分页并且将信息都返回前端
如果后端返回所有的数据,前端自己做分页的话
methods: { getList() { fetchList().then(response => { this.highArray = response.data.content }) }, handleSizeChangeHigh(pageSize) { this.highPageSize = pageSize this.highCurrentPage = 1 this.fetchList() this.handleCurrentChangeHigh(this.highCurrentPage) }, handleCurrentChangeHigh(currentPage) { this.highCurrentPage = currentPage this.highTableData = this.currentChangePage( this.highArray, currentPage, this.highPageSize ) }, // 分页方法(重点) currentChangePage(list, currentPage, pageSize) { let from = (currentPage - 1) * pageSize const to = currentPage * pageSize this.tempList = [] for (; from < to; from++) { if (list[from]) { this.tempList.push(list[from]) } } return [...this.tempList] } }
实现效果:
参考: https://segmentfault.com/a/1190000016049838