
我這里用的是el-table做的分頁 html
<el-table :key="'collapseTable-' + accordionDataTwo.type + '-' + accordionDataTwo.id" v-loading="accordionTwoLoading" ref="multipleTable" :data="indexResultsTable" style="width: 100%">
<el-table-column prop="date" label="時間" show-overflow-tooltip header-align="center" align="center" fixed></el-table-column>
<el-table-column prop="loadedCount" label="已加載到JVM中類的總數" show-overflow-tooltip header-align="center" align="center" ></el-table-column>
<el-table-column prop="memory" label="堆當前分配內存大小" show-overflow-tooltip header-align="center" align="center"></el-table-column>
<el-table-column prop="allowedSessionCount" label="允許的會話數" show-overflow-tooltip header-align="center" align="center"></el-table-column>
<el-table-column prop="createdSessionCount" label="會話管理器創建的會話總數" show-overflow-tooltip header-align="center" align="center"></el-table-column>
<el-table-column prop="activeMaxSessionCount" label="設置當前已激活會話的最大數量" show-overflow-tooltip header-align="center" align="center"></el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
js
data 中定義的變量
data: function() {
return {
currentPage:1, //初始頁
pagesize:10, // 每頁的數據
total:0,
indexResultsTable:[],
}
},
// js 方法
methods: {
handleSizeChange:function(size){
this.pagesize = size;
this.getResultsTable();
},
handleCurrentChange:function(page){
this.currentPage = page;
this.getResultsTable();
},
//前端自己分頁
getResultsTable:function() {
// es6過濾得到滿足搜索條件的展示數據list
var self=this;
var list = self.accordionDataTwo.tableData;//后端回來表格的數據
//表格渲染的數據 indexResultsTable:[],
this.indexResultsTable = list.filter((item, index) =>
index < self.currentPage * self.pagesize && index >= self.pagesize * (self.currentPage - 1)
) ;//根據頁數顯示相應的內容
this.total = list.length;
},
}