JS(vue iview)分頁解決方案

一、解決思路

• 使用分頁組件
• 使用組件API使組件自動生成頁面數量
• 調用組件on-change事件的返回值page
• 將交互獲得的數組存在一個數組list中
• 通過page變量使一定數量的數據存入pageList數組中
• 使用v-for進行數據的展示

二、具體代碼實現

組件代碼

<Page :total="total" show-elevator :page-size='9' class="page" @on-change="handleChange"></Page>

method代碼

        handleChange(page) {
            this.pageList.splice(0, this.pageList.length);
            this.pageList=this.list.slice((page - 1) * 9,page * 9);
        }

三、Tips

splice 與 slice 函數

splice函數

定義和用法

splice() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。

注釋：該方法會改變原始數組。

語法

arrayObject.splice(index,howmany,item1,.....,itemX)

參數	描述
index	必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany	必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。
item1, ..., itemX	可選。向數組添加的新項目。

返回值

類型	描述
Array	包含被刪除項目的新數組，如果有的話。

說明

splice() 方法可刪除從 index 處開始的零個或多個元素，並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。

如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數組。

定義和用法

slice() 方法可從已有的數組中返回選定的元素。

語法

arrayObject.slice(start,end)

參數	描述
start	必需。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推。
end	可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那么它規定的是從數組尾部開始算起的元素。

返回值

返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

說明

請注意，該方法並不會修改數組，而是返回一個子數組。如果想刪除數組中的一段元素，應該使用方法 Array.splice()。

提示和注釋

注釋：您可使用負值從數組的尾部選取元素。

注釋：如果 end 未被規定，那么 slice() 方法會選取從 start 到數組結尾的所有元素。

四、problems

調用on-change函數的返回值時出現以下三種情況

情況一

情況二

情況三

2017.10.06 21:50 project-name: ws2 Project Management system