iview官網(wǎng)中page換頁(yè)配合table組件有示例，切換請(qǐng)求展示數(shù)據(jù)。
需求：請(qǐng)求返回的數(shù)據(jù)需要進(jìn)行賽選后再進(jìn)行展示，不能直接將數(shù)據(jù)與table :data進(jìn)行關(guān)聯(lián)咒程。
3.gif
<template>
// changeTableCheckbox 勾選事件
<table :clumens="cloumns" :data="data" @on-selection-change="changeTableCheckbox"></table>
<page
:total="total"
:page-size="pageSize"
:current="pageIndex"
@on-change="changePage"
@on-page-size-change="changePageSize"
show-total
show-sizer></page>
</template>
data(){
return {
oldData: [] // 用來(lái)存儲(chǔ)篩選后得到的數(shù)據(jù)
data: [] // table 對(duì)應(yīng)的數(shù)組
total: 0, // 數(shù)據(jù)的總條數(shù)
pageIndex: 1, // 當(dāng)前頁(yè)數(shù)
pageSize: 10, // 每頁(yè)條數(shù)
total: 0 // 總條數(shù)
}
}，
mounted(){
this.data = this.oldData.slice(0, this.pageSize)
this.total = this.oldData.length
},
methods: {
// 換頁(yè)
changePage(index) {
this.pageIndex = index
var start = (index - 1) * this.pageSize
var end = index * this.pageSize
}讼育，
// 每頁(yè)展示多少條
changePageSize(value) {
this.pageSize = value
if(this.pageIndex == 1) {
this.init()
}
}
}
日常記錄帐姻，有錯(cuò)誤or優(yōu)化請(qǐng)指出，不勝感激奶段！
