el-pagination 靜態分頁
阿新 • • 發佈:2021-07-03
<template> <div> <el-table :data="xpList" border style="width: 100%" height="500" > <el-table-column prop="" label="序號" :formatter="nShowIndex" width="80"></el-table-column> <el-table-column label="序號1" align="center" width="80"> <template slot-scope="scope"> {{scope.$index + 1 + page.pageSize*(page.currentPage-1)}} </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年齡" width="120"></el-table-column> </el-table> <div style="margin-top:20px"> <el-pagination background layout="total,prev, pager, next,jumper" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size ="page.pageSize" :total="page.total"> </el-pagination> </div> </div> </template> <script> export default { data(){ return{ // 模擬靜態資料來源 arrObj : [ {name: 'a', age: 1}, {name: 'b', age: 2}, {name: 'c', age: 3}, {name: 'd', age: 4}, {name: 'e', age: 5}, {name: 'f', age: 6}, {name: 'g', age: 7}, {name: 'h', age: 8}, {name: 'i', age: 9}, {name: 'j', age: 10}, ], // 頁面分頁後展示的資料 xpList:[], // element分頁配置 page: { total: 0, // 總頁數 currentPage: 1, // 當前頁數 pageSize: 5, // 每頁顯示多少條, isAsc: false // 是否倒序 } } }, created() { this.page.total = this.arrObj.length; // this.xpList = this.arrObj.slice(0,5); this.xpList = this.arrObj.slice(0,this.page.pageSize); } , methods: { handleCurrentChange(val){ //第一頁判斷 if(val === 1){ this.xpList = this.arrObj.slice(0,this.page.pageSize); } else { this.xpList = this.arrObj.slice(val * this.page.pageSize - this.page.pageSize ,val * this.page.pageSize); } // 設定頁碼 this.page.currentPage=val; }, // 表格內自定義顯示 nShowIndex(row, column, cellValue, index){ return index + 1; } , // 測試slice函式用 btnButton(){ const strTemp= ['11','22','33','44','55','66','77','88','99'] const lResult = strTemp.slice(7,10); console.log(lResult); }, } } </script> <style scoped> </style>