实现iview UI框架table 分页翻页保留选项。
<Modal v-model="modal12" @on-ok="ok" title="选择体">
<div class="sousuo"><Input v-model="value1" :readonly="false" placeholder="" style="width: 300px"/><Button type="default" @click="chaxun_one(1)">搜</Button></div>
<!--表单-->
<Table stripe ref="selection" :columns="columns2" :data="data2"
@on-select="onSelect"
@on-select-cancel="onSelectCancel"
@on-select-all="onSelectAll"
@on-select-all-cancel="onSelectAllCancel"
></Table>
<!--分页-->
<Page show-total :total="zongtiaoshu" :page-size="pageSize" @on-change="qiehuanpage"/>
</Modal>
onSelect(selection,row){
this.tempArr.push(row.id)
this.data11.push(row.name)
this.data2.forEach(item =>{
if(item.id === row.id){
item['_checked'] = true
}
})
},
onSelectCancel(selection,row){
this.tempArr.forEach((item,index) =>{
if(row.id === item){
this.tempArr.splice(index,1)
}
})
this.data11.forEach((item,index) =>{
if(row.name === item){
this.data11.splice(index,1)
}
})
},
onSelectAll(selection){
selection.forEach(item =>{
item['_checked'] = true
this.tempArr.push(item.id)
this.data11.push(item.name)
})
},
onSelectAllCancel(selection){
this.data2.forEach((e,index) =>{
this.tempArr.forEach((item,index) =>{
if(e.id === item){
this.tempArr.splice(index,1)
}
})
this.data11.forEach((item,index) =>{
if(e.name === item){
this.data11.splice(index,1)
}
})
})
},
handleTableChecked(datas){
this.tempArr.forEach(item =>{
datas.forEach(e =>{
if(item === e.id){
e['_checked'] = true
}
})
})
}
附上我的代码,代码应该不用解释了,对你们有用的话,记得点个赞!!!