Vue 前端做假分頁,不請求后台數據


我這里用的是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;
            },
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM