vue+iview Realization of Paging and Query Function

vue + iview paging and deletion, search function implementation, for your reference, the specific content is as follows

First of all, if you want to realize paging function, you must know the current page number, the size of each page and the total number.

iview's paging support is still very powerful, with many hook functions

See the data returned by the back end for specific implementation

<template>
 <div v-if="this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1">
 <Input type="text" search enter-button placeholder=" Search according to the name of the construction personnel " v-model="peopleName" @input="search"/>
 <Table width="100%" :columns="peopleCol" :data="peopleDat"></Table>
 <!-- Pass sync Modifier can dynamically get page numbers -->
 <Page :total="dataCount" :current.sync="current" :page-size="pageSize" show-total class="paging" @on-change="changePage"></Page>
 
 <!-- The modal Yes, delete reminder box -->
 <Modal v-model="confirmDelete" width="360">
  <p slot="header" style="color:#f60;text-align:center">
  <Icon type="ios-information-circle"></Icon>
  <span> Delete confirmation </span>
  </p>
  <div style="text-align:center">
  <p> This operation is not reversible. Are you sure you want to delete it? </p>
  </div>
  <div slot="footer">
  <Button size="large" @click="cancelDelete"> Cancel </Button>
  <Button type="error" size="large" @click="deleteConfirm"> Delete </Button>
  </div>
 </Modal>
 </div>
</template>
<script>
 export default {
 components: {
  addWorker,
  updateWorker
 },
 data () {
  return {
  selectedID:'',// Delete the selected ID
  confirmDelete:false,// Delete prompt box 
  current:1,
  isShow:false,
  selectedList:{},// Select the construction personnel id Value 
  peopleName:'',
  dataCount:0,// Total number of articles 
  pageSize:2,// Number of data pieces displayed per page 
  peopleDat: [],
  peopleCol: [
   {
   title: ' Operation ',
   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)
     }
     }
    }, ' Delete ')
   }
   }
  ],
  }
 },
 mounted() {
  this.getWorkerList()
 },
 methods:{
  getWorkerList(){// Component initializes the displayed data 
  const currPage=1
  const pageSize=this.pageSize
  // The following is a request sent to the background 
  setTimeout(async()=>{
   const r=await getWorkers(currPage,pageSize)
   if(r.data.success){
   this.dataCount=r.data.list.count// Total number of initializations 
   this.peopleDat=r.data.list.data// Default page list rendering data 
   console.log(r)
   }
  })
  },
  changePage(index){// Function triggered by page number change 
  //index Current page number 
  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// Current page 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// If you don't set the total number, then every page will have data when querying accurately, which depends on whether the data returned by the back end has these data or not 
   } else {
   this.$Message.warning(' Query failed !')
   }
  })
  },
  delete(peopleID){
  this.selectedID=peopleID
  },
  deleteConfirm(){
  const id=this.selectedID
  setTimeout(async ()=>{
   const r=await deleteWorker(id)
   if(r.data.success){
   // It's made here 1 The function is to refresh the data of a page immediately after deleting the data of the current page 
   this.changePage(this.current)// Update the data of the current page number 
   this.$Message.success(' Delete succeeded !')
   } else{
   this.$Message.warning(' Delete failed !')
   }
  })
  this.confirmDelete=false
  },
  cancelDelete(){
  this.confirmDelete=false
  this.$Message.info(' You canceled the delete operation ')
  }
 }
 }
</script>
<style scoped>
 .paging{
 float:left;
 margin-top:10px;
 }
</style>

For the learning tutorial of vue. js, please click on the special vue. js component learning tutorial and Vue. js front-end component learning tutorial to learn.