vue+iview 分页及删、查功能实现，供大家参考，具体内容如下
首先要想实现分页功能必须得知道 当前页码、每页大小、总数目。
iview对分页的功能支持还是很强大的，有很多钩子函数
具体实现看后端返回的数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<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 width="100%" :columns="peopleCol" :data="peopleDat"></Table>
<!--通过sync修饰符可以动态获取页码-->
<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>删除确认</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>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_38238296/article/details/94383707