ElementUi中el-table分頁效果-有解無憂

　　現實的場景中很經常遇到表格el-table資料過多，為了更好的用戶體驗，所以我們需要用到分頁，一般分頁可以視資料量的大小可分為前端控制和后端控制，

　　先看下效果（已做脫敏處理）

圖1 前端el-table分頁效果

這里就把ElementUi官方的例子進行修改來說明

<template>
    <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        :stripe="stripe"
        :current-page.sync="currentPage"
        style="width: 100%">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
         </el-table-column>
         <el-table-column
            prop="name"
            label="姓名"
            width="180">
         </el-table-column>
         <el-table-column
            prop="address"
            label="地址">
         </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</template>

<script>
export default {
    data(){
        return{
            stripe:true,//是否為斑馬紋 table
            tableData: [],
            currentPage:1,
            pagesize:10,
            total:0,
        }
    },
    methods:{
        handleSizeChange(val) {
            this.pagesize=val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
    }
}
<script>

　　分頁的核心是tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)這一句代碼，利用了slice方法把資料源tableData進行分割，但實際上是請求了所有的資料，如圖2所示，然后實作前端假分頁顯示，

圖2 實際tableData請求了所有的資料，共13條資料

　　還有一種分頁的思想就是給后臺傳入如上的引數currentPage和pagesize的值，告訴后臺，我們需要[(currentPage-1)*pagesize,currentPage*pagesize]這一個區間的資料，讓后臺回傳來，

　　這兩種方法各有利弊，如果是前者前端控制分頁的方法，因為本質是請求了所有的資料，如果這個資料量非常大，涉及到了幾百，幾千甚至幾萬資料，第一頁的table資料加載的時間就會非常慢，因為它把后面的資料都拿過來了，用戶體驗非常不好，對記憶體空間也很不友好，明明只顯示了幾十條的資料，卻為此存了幾萬條的資料，就好比sql陳述句的select * from和select [需要的欄位] from一樣，明顯后者的效率會好些，但是它也是有好處的，好處就是如果在資料量小的情況下，第一頁table加載速度用戶也能接受的情況下，用戶之后點擊切換頁面按鈕或者直接跳轉到哪個頁面都不需要發起請求即可顯示出資料，速度非常快，

　　而后者后端控制分頁的情況，每次切換頁面都得發起請求，畢竟魚和熊掌不可兼得，我們只能根據實際情況和用戶需求做調整，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170401.html

標籤：JavaScript

上一篇：JS基礎語法---一元運算子

下一篇：ES6 Set