vue+iview implements pagination and query functions

<template>
 <div v-if="this.$ == 0 || this.$ == 1">
 <Input type="text" search enter-button placeholder="Finish by the name of the construction worker" v-model="peopleName" @input="search"/>
 <Table width="100%" :columns="peopleCol" :data="peopleDat"></Table>
 <!--passsyncModifiers can dynamically obtain page numbers-->
 <Page :total="dataCount" :="current" :page-size="pageSize" show-total class="paging" @on-change="changePage"></Page>
 
 <!--ShouldmodalIt is to delete the 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 Confirm</span>
  </p>
  <div style="text-align:center">
  <p>This operation is not restored，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 the prompt box  current:1,
  isShow:false,
  selectedList:{},//Select the id value of the construction personnel  peopleName:'',
  dataCount:0,//Total number of items  pageSize:2,//The number of data strips displayed per page  peopleDat: [],
  peopleCol: [
   {
   title: 'operate',
   key: 'action',
   width: 120,
   render: (h, params) => {
    return h('Button', {
     props: {
     type: 'error',
     size: 'small'
     },
     on:{
     click: ()=>{
      =true
      ()
     }
     }
    }, 'delete')
   }
   }
  ],
  }
 },
 mounted() {
  ()
 },
 methods:{
  getWorkerList(){//Component initialization display data  const currPage=1
  const pageSize=
  //The following is sending a request to the background  setTimeout(async()=>{
   const r=await getWorkers(currPage,pageSize)
   if(){
   =//Initialize the total number of characters   =//Default page list rendering data   (r)
   }
  })
  },
  changePage(index){//Function triggered by page number change  //index current page number  const currPage=index
  const pageSize=
  setTimeout(async ()=>{
   const r=await changePage(currPage,pageSize)
   if(){
   =//Current page list data   }
  })
  },
  search(){
  const peopleName=
  const pageSize=
  setTimeout(async()=>{
   const r=await search(peopleName,pageSize)
   if(){
   =
   =//If you do not set the total number of entries, then when you are queried accurately, there will be data on each page. It depends on whether the data returned by the backend has this data.   } else {
   this.$('The query failed!')
   }
  })
  },
  delete(peopleID){
  =peopleID
  },
  deleteConfirm(){
  const id=
  setTimeout(async ()=>{
   const r=await deleteWorker(id)
   if(){
   //A function here is to refresh the data of the current page immediately after you delete the data of a certain page.   ()//Update the data of the current page number   this.$('Delete successfully!')
   } else{
   this.$('Deletion failed!')
   }
  })
  =false
  },
  cancelDelete(){
  =false
  this.$('You canceled the delete operation')
  }
 }
 }
</script>
<style scoped>
 .paging{
 float:left;
 margin-top:10px;
 }
</style>