vue+iview 分頁及刪、查功能實現

首先要想實現分頁功能必須得知道 當前頁碼、每頁大小、總數目。

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

具體實現看后端返回的數據

<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修飾符可以動態獲取頁碼--> <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,//總條數 pageSize:2,//每頁顯示數據條數 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(){//組件初始化顯示的數據 const currPage=1 const pageSize=this.pageSize //下面是向后臺發送請求 setTimeout(async()=>{ const r=await getWorkers(currPage,pageSize) if(r.data.success){ this.dataCount=r.data.list.count//初始化總條數 this.peopleDat=r.data.list.data//默認頁列表渲染數據 console.log(r) } }) }, changePage(index){//頁碼改變觸發的函數 //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//當前頁列表數據 } }) }, 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//如果不設置總條數那么當精確查詢時每頁都會有數據這得看后端返回的數據有沒有這些數據 } 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){ //這里做的一個功能是當你刪除某頁數據后立即刷新當前頁的數據 this.changePage(this.current)//更新當前頁碼的數據 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前端組件學習教程進行學習。

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