当前位置:首页 >  站长 >  编程技术 >  正文

vue+iview实现分页及查询功能

 2020-11-19 15:12  来源: 脚本之家   我来投稿   球球的个人主页 撤稿纠错

  小红书种草一手资源覆盖200+行业

这篇文章主要为大家详细介绍了vue+iview实现分页及查询功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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 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>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

来源:脚本之家

链接:https://www.jb51.net/article/199911.htm

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

作者: 球球    /    文章:1886篇

相关标签
vue.js

相关文章

  • vue自定义组件实现双向绑定

    这篇文章主要为大家详细介绍了vue自定义组件实现双向绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    标签:
    vue.js
  • Vue实现随机验证码功能

    这篇文章主要为大家详细介绍了Vue实现随机验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    标签:
    vue.js
  • vue实现树状表格效果

    这篇文章主要为大家详细介绍了vue实现树状表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    标签:
    vue.js
  • vue添加自定义右键菜单的完整实例

    这篇文章主要给大家介绍了关于vue添加自定义右键菜单的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    标签:
    vue.js
  • 在vue中通过render函数给子组件设置ref操作

    这篇文章主要介绍了在vue中通过render函数给子组件设置ref操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

热门排行

信息推荐

扫一扫关注最新创业资讯