vue+iview 分頁及刪、查功能實(shí)現(xiàn)

首先要想實(shí)現(xiàn)分頁功能必須得知道 當(dāng)前頁碼、每頁大小、總數(shù)目。

iview對(duì)分頁的功能支持還是很強(qiáng)大的，有很多鉤子函數(shù)

具體實(shí)現(xiàn)看后端返回的數(shù)據(jù)

<template> <div v-if='this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1'> <Input type='text' search enter-button placeholder='根據(jù)施工人員姓名查找' v-model='peopleName' @input='search'/> <Table :columns='peopleCol' :data='peopleDat'></Table> <!--通過sync修飾符可以動(dòng)態(tài)獲取頁碼--> <Page :total='dataCount' :current.sync='current' :page-size='pageSize' show-total @on-change='changePage'></Page> <!--該modal是刪除提醒框--> <Modal v-model='confirmDelete' width='360'> <p slot='header' style='color:#f60;text-align:center'> <Icon type='ios-information-circle'></Icon> <span>刪除確認(rèn)</span> </p> <div style='text-align:center'> <p>此操作不可恢復(fù)，確定要?jiǎng)h除嗎？</p> </div> <div slot='footer'> <Button size='large' @click='cancelDelete'>取消</Button> <Button type='error' size='large' @click='deleteConfirm'>刪除</Button> </div> </Modal> </div></template><script> export default { components: { addWorker, updateWorker }, data () { return { selectedID:’’,//刪除選中的ID confirmDelete:false,//刪除提示框 current:1, isShow:false, selectedList:{},//選中施工人員的id值 peopleName:’’, dataCount:0,//總條數(shù) pageSize:2,//每頁顯示數(shù)據(jù)條數(shù) peopleDat: [], peopleCol: [ { title: ’操作’, key: ’action’, width: 120, render: (h, params) => { return h(’Button’, { props: { type: ’error’, size: ’small’ }, on:{ click: ()=>{ this.confirmDelete=true this.delete(params.row.peopleID) } }}, ’刪除’) } } ], } }, mounted() { this.getWorkerList() }, methods:{ getWorkerList(){//組件初始化顯示的數(shù)據(jù) const currPage=1 const pageSize=this.pageSize //下面是向后臺(tái)發(fā)送請(qǐng)求 setTimeout(async()=>{ const r=await getWorkers(currPage,pageSize) if(r.data.success){ this.dataCount=r.data.list.count//初始化總條數(shù) this.peopleDat=r.data.list.data//默認(rèn)頁列表渲染數(shù)據(jù) console.log(r) } }) }, changePage(index){//頁碼改變觸發(fā)的函數(shù) //index當(dāng)前頁碼 const currPage=index const pageSize=this.pageSize setTimeout(async ()=>{ const r=await changePage(currPage,pageSize) if(r.data.success){ this.peopleDat=r.data.list.data//當(dāng)前頁列表數(shù)據(jù) } }) }, search(){ const peopleName=this.peopleName const pageSize=this.pageSize setTimeout(async()=>{ const r=await search(peopleName,pageSize) if(r.data.success){ this.peopleDat=r.data.list.data this.dataCount=r.data.list.count//如果不設(shè)置總條數(shù)那么當(dāng)精確查詢時(shí)每頁都會(huì)有數(shù)據(jù)這得看后端返回的數(shù)據(jù)有沒有這些數(shù)據(jù) } else { this.$Message.warning(’查詢失敗!’) } }) }, delete(peopleID){ this.selectedID=peopleID }, deleteConfirm(){ const id=this.selectedID setTimeout(async ()=>{ const r=await deleteWorker(id) if(r.data.success){ //這里做的一個(gè)功能是當(dāng)你刪除某頁數(shù)據(jù)后立即刷新當(dāng)前頁的數(shù)據(jù) this.changePage(this.current)//更新當(dāng)前頁碼的數(shù)據(jù) this.$Message.success(’刪除成功!’) } else{ this.$Message.warning(’刪除失敗!’) } }) this.confirmDelete=false }, cancelDelete(){ this.confirmDelete=false this.$Message.info(’你取消了刪除操作’) } } }</script><style scoped> .paging{ float:left; margin-top:10px; }</style>

關(guān)于vue.js的學(xué)習(xí)教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。