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表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue使用echarts实现折线图
Mar 21 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
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
浅谈Python的异常处理
2016/06/19 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
Python timeit模块的使用实践
2020/01/13 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
python 实现单例模式的5种方法
2020/09/23 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
九年级数学教学反思
2014/02/02 职场文书
我的祖国演讲稿
2014/05/04 职场文书
解析MySQL binlog
2021/06/11 MySQL
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python