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


Posted in Vue.js onNovember 17, 2020

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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
西德产收音机
2021/03/01 无线电
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
数据库面试要点基本概念
2013/10/31 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
职代会闭幕词
2015/01/28 职场文书
邀请函怎么写
2015/01/30 职场文书
课题研究阶段性总结
2015/08/13 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
js不常见操作运算符总结
2021/11/20 Javascript