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前端组件学习教程进行学习。

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