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

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

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

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

<template> <div v-if='this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1'> <Input type='text' search enter-button placeholder='根據施工人員姓名查找' v-model='peopleName' @input='search'/> <Table :columns='peopleCol' :data='peopleDat'></Table> <!--通過sync修飾符可以動態(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>刪除確認</span> </p> <div style='text-align:center'> <p>此操作不可恢復，確定要刪除嗎？</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ù)據條數(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ù)據 const currPage=1 const pageSize=this.pageSize //下面是向后臺發(fā)送請求 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//默認頁列表渲染數(shù)據 console.log(r) } }) }, changePage(index){//頁碼改變觸發(fā)的函數(shù) //index當前頁碼 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//當前頁列表數(shù)據 } }) }, 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ù)據這得看后端返回的數(shù)據有沒有這些數(shù)據 } 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){ //這里做的一個功能是當你刪除某頁數(shù)據后立即刷新當前頁的數(shù)據 this.changePage(this.current)//更新當前頁碼的數(shù)據 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>

關于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。