JS(vue iview)分頁解決方案

JS(vue iview)分頁解決方案

1、解決思路

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

2、具體代碼實現

組件代碼

<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);
        }

3、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 到數組結尾的全部元素。

4、problems

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

狀況一

狀況二

狀況三

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