vue+iview实现分页及查询功能
2020-11-18 04:06
441 查看
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前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- Vue.js实现分页查询功能
- 基于vue.js实现分页查询功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- mybatis分页及模糊查询功能实现
- 利用VUE框架,实现列表分页功能示例代码
- Hibernate使用原生的动态sql实现带条件的查询分页功能
- thinkPHP5框架实现分页查询功能的方法示例
- vue+iview+less 实现换肤功能
- Mybatis实现简单的分页,以及基本的查询修改功能
- android分页查询功能工具类的实现
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 6、实现通用分页功能二(实现通用分页查询的业务方法)
- JQuery+Ajax实现数据查询、排序和分页功能
- ssm框架查询数据并实现分页功能示例
- Kotlin实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果)
- 基于SSM实现分页查询和显示功能
- springmvc4+hibernate4分页查询功能实现
- 利用VUE框架,实现列表分页功能
- 用Java实现异构数据库的高效通用分页查询功能