el-table + el-pagination 前端實現分頁操作

后端返回全部列表數據，前端進行分頁操作

html代碼

<div><el-table :data="tableData" border><el-table-column label="序號" type="index" width="50" /><el-table-column prop="name" label="禮品名稱"><template slot-scope="scope">{{ scope.row.orderInfo.itemName }}</template></el-table-column><el-table-column prop="orderNum" label="訂單編號" width="120"><template slot-scope="scope">{{ scope.row.orderInfo.orderNum }}</template></el-table-column><el-table-column prop="name" label="物流編號" width="130"><template slot-scope="scope">{{ scope.row.orderInfo.expressCode }}</template></el-table-column><el-table-column prop="name" label="禮品單價" width="80"><template slot-scope="scope">{{ scope.row.orderInfo.unitPrice }}</template></el-table-column><el-table-column prop="name" label="禮品數量" width="80"><template slot-scope="scope">{{ scope.row.orderInfo.quantity }}</template></el-table-column><el-table-column prop="name" label="訂單金額" width="80"><template slot-scope="scope">{{ scope.row.orderInfo.price }}</template></el-table-column><el-table-column prop="name" label="訂單日期" width="130"><template slot-scope="scope">{{ scope.row.orderInfo.orderDate }}</template></el-table-column><el-table-column prop="isError" label="是否成功" width="80"><template slot-scope="scope">{{ scope.row.isError ? '否' : '是' }}</template></el-table-column><el-table-column prop="errorInfo" label="錯誤信息"><template slot-scope="scope">{{ scope.row.errorInfo }}</template></el-table-column></el-table><el-pagination:total="total":current-page="page":page-size="size":page-sizes="pageSizes"layout="total, sizes, prev, pager, next, jumper"@size-change="sizeChange"@current-change="currentChange"/>
</div>

js代碼

兩種方式：
① slice
② splice

<script>
export default {name: 'ImportLog',data() {return {page: 1, // 第幾頁size: 20, // 一頁多少條total: 0, // 總條目數pageSizes: [20, 40, 60, 80, 100, 120, 140, 160, 180, 200], // 可選擇的一頁多少條tableData: [], // 表格綁定的數據allData: [], // 全部數據}},created() {this.getTabelData2()},methods: {// 獲取表格數據，自行分頁(slice)getTabelData() {// allData為全部數據this.tableData = this.allData.slice((this.page - 1) * this.size,this.page * this.size)this.total = this.allData.length},// 獲取表格數據，自行分頁（splice）getTabelData2() {const data = JSON.parse(JSON.stringify(this.allData))this.tableData = data.splice((this.page - 1) * this.size,this.size)this.total = this.allData.length},// page改變時的回調函數，參數為當前頁碼currentChange(val) {this.page = valthis.getTabelData2()},// size改變時回調的函數，參數為當前的sizesizeChange(val) {this.size = valthis.page = 1this.getTabelData2()}}
}
</script>