iview page分页,
这篇文章主要为大家详细介绍了vue iview实现分页及查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue iview分页及删、查功能实现，供大家参考，具体内容如下
首先要想实现分页功能必须得知道当前页码、每页大小、总数目。
接口对分页的功能支持还是很强大的，有很多钩子函数
具体实现看后端返回的数据
模板
div v-if=this .$ store。状态。用户。usertype==0 this .$store.state.user.userType==1
输入类型=文本搜索回车-按钮占位符=根据施工人员姓名查找v-model=人名 @ input= search /
表宽度=100% :列=peopleCol :数据=人民日期/表
！-通过同步修饰符可以动态获取页码-
Page:total= data count :当前。sync= current :Page-size= pageSize show-total class= paging @ on-change= change Page /Page
！-该情态的是删除提醒框-
模态垂直模型=确认删除宽度=360
p slot= header style= color:# f60；文本对齐：居中
图标类型= IOs-信息-圆圈/Icon
跨度删除确认/span
/p
div style=text-align:center
p此操作不可恢复，确定要删除吗？/p
/div
div slot=页脚
button size= large @ click=取消删除取消/按钮
按钮type= error size= large @ click= delete confirm 删除/按钮
/div
/Modal
/div
/模板
脚本
导出默认值{
组件：{
添加工人，
更新工人
},
data () {
返回{
selectedID: ，//删除选中的身份
confirmDelete:false，//删除提示框
电流：1,
isShow:假，
selectedList:{}，//选中施工人员的编号值
人名：,
数据计数：0,//总条数
页面大小：2,//每页显示数据条数
人民日期：[],
peopleCol: [
{
标题： 操作，
按键："动作",
宽度：120,
render: (h，params)={
返回h(按钮,{
道具：{
类型："错误",
尺寸："小"
},
开：{
点击：()={
this.confirmDelete=true
这个。删除(参数。划。人员id)
}
}
}, 删除)
}
}
],
}
},
已安装(){
this.getWorkerList()
},
方法：{
getWorkerList(){//组件初始化显示的数据
const currPage=1
const pageSize=this.pageSize
//下面是向后台发送请求
setTimeout(async()={
const r=await getWorkers(curr page，pageSize)
if(r.data.success){
这个。数据计数=r .数据。列表。count//初始化总条数
这个。人民数据=r .数据。列表。数据//默认页列表渲染数据
控制台。对数(r)
}
})
},
变更页面(索引){//页码改变触发的函数
//索引当前页码
const currPage=index
const pageSize=this.pageSize
setTimeout(async ()={
const r=等待更改页面(curr page，pageSize)
if(r.data.success){
这个。人民数据=r .数据。列表。数据//当前页列表数据
}
})
},
search(){
const人物名=this。人名
const pageSize=this.pageSize
setTimeout(async()={
const r=await search(peopleName，pageSize)
if(r.data.success){
这个。人民数据=r .数据。列表。数据
这个。数据计数=r .数据。列表。count//如果不设置总条数那么当精确查询时每页都会有数据这得看后端返回的数据有没有这些数据
}否则{
这个Message.warning(查询失败!)
}
})
},
删除(peopleID){
this.selectedID=peopleID
},
deleteConfirm(){
const id=this.selectedID
setTimeout(async ()={
const r=await deleteWorker(id)
if(r.data.success){
//这里做的一个功能是当你删除某页数据后立即刷新当前页的数据
这个。换页(这个。当前)//更新当前页码的数据
这个Message.success(删除成功!)
}否则{
这个Message.warning(删除失败!)
}
})
this.confirmDelete=false
},
cancelDelete(){
this.confirmDelete=false
这个 Message.info(你取消了删除操作)
}
}
}
/脚本
样式范围。分页{
浮动：左；
页边距-顶部：10px
}
/风格
vue.js的学习教程请点击专门的vue.js组件学习教程和Vue.js前端组件学习教程进行学习。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。