這篇文章主要為大家詳細(xì)介紹了vue+iview實現(xiàn)分頁及查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue+iview 分頁及刪、查功能實現(xiàn)
首先要想實現(xiàn)分頁功能必須得知道 當(dāng)前頁碼、每頁大小、總數(shù)目。
iview對分頁的功能支持還是很強大的，有很多鉤子函數(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 width="100%" :columns="peopleCol" :data="peopleDat"></Table>
<!--通過sync修飾符可以動態(tài)獲取頁碼-->
<Page :total="dataCount" :current.sync="current" :page-size="pageSize" show-total class="paging" @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ù)，確定要刪除嗎？</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
//下面是向后臺發(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//默認(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ù)據(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){
//這里做的一個功能是當(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í)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
來源：腳本之家
鏈接：https://www.jb51.net/article/199911.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
