Secondary encapsulation of the paging component

Today I wanted to sort out some of the paging component packaging issues I encountered while working on the project. Originally, I did not want to go to the package, but later I found that many pages need to use pages, if I do not go to the package, the workload will be very large, so I went to the code by myself.

u

This is a project based on VUE and Element-UI. It is also the project I really tried to do after learning VUE for the first time

“

  • Encapsulate el-Pagination in your own component pagination. Vue
<template>
  <div class="block" v-if="bgDate.length ! = 0">
    <el-pagination
// Select how many data items to display per page @size-change="handleSizeChange" // The current page count method @current-change="handleCurrentChange" // The current number of pages :current-page="currentPage" // How many pieces of data are currently displayed per page :page-sizes="pagesizes" // Default number of entries per page :page-size="sizeChange"  layout="total, sizes, prev, pager, next, jumper" / / data :total="dateSource.length" / / the data source :date="dateSource"  ></el-pagination>  </div> </template> Copy the code
  • Some data required by the paging component
/ * *   * pagesizes==>[2, 3, 4, 5, 6]
* dateSource ==> Data source (background data passed by the parent component)* /
// These two variables are passed by a parent component
 props: ["pagesizes"."dateSource"]. data() {  return {  tableData: [].// Access component rendered data  bgDate: [], // Access the data source  // Default number of entries per page  sizeChange: 5. // The current page number, supports the.sync modifier  currentPage: 1  };  } Copy the code
  • The parent component requests data and passes it to the child component
// Get all novels
    getAllStory() {
      this.$axios.get("api2/users/getAllStroy").then(res= > {
        var storyDatas = res.data.data.storyDatas;
        console.log("Get all the novel data.",storyDatas);
 //bgDate data passed to the paging component  this.bgDate = storyDatas;  });  }, Copy the code

However, the problem came when the parent component used AXIos to get asynchronous data to the child component, but found that the child component had no data at the time of rendering, and the print in created was also empty, and found that the data bound by the child component was empty at the beginning. When the requested data did not return data, the child component was already loaded. And its binding value is also null, problem found, how to solve that? There are two ways to do it

The first:

  • Use watch to listen to data source (data from parent component)
watch: {
    // Listen to the data source dateSource, which will be used at :data in el-Pagination
    dateSource(val) {
      console.log("Listen to data source :", val);
      this.bgDate = val;
 this.showPagination(this.currentPage);  }  }, Copy the code
  • The second is to use vuex, which I won’t go into here, but you can read this article

The problem of the vUE parent getting dynamic data asynchronously and passing it to the child to get no value has been solved perfectly

u

Component loading rendering process: Parent beforeCreate-> Parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> Parent Mounted

“

With the data source solved, the next step is to show the data that the background gives you

 // This method is used to determine what data is displayed on the current page
 // Get the specified data from the data source according to the current page number curPage
showPagination(curPage) {
      console.log('Page number range',curPage)
      this.tableData = [];
 var bgLen = this.bgDate.length;  //sizeChange Specifies the default number of entries per page  var left = this.sizeChange * (curPage - 1);  var right = this.sizeChange * curPage;  for (var i = 0; i < bgLen; i++) {  if (i >= left && i < right) {  this.tableData.push(this.bgDate[i]);  }  }  // The method that triggers the parent component (telling the parent what data to display)  this.$emit("showDate".this.tableData);  }, Copy the code
  • The parent component
// Display interface data (click the page button)
// Receive data from child components
    showDate(response) {
      console.log('Receive data from child components',response)
      this.tableData = response;
 }, Copy the code

The last problem I encountered was that when I deleted data, I found that after deleting the last data page on the last page, it did not automatically jump to the previous page, but stopped on the current page. I wrote my own solution to this problem.

// Delete the item
    handleDelete() {
      / / / * *
      // * Delete the number from the end
      // * Check whether the page has no data, if not, automatically jump to the previous page
 / / * * /  this.showPagination(this.currentPage);  if (  Math.ceil(this.tableData.length / this.sizeChange) ! = this.currentPage &&  this.currentPage ! =1  ) {  this.handleCurrentChange(this.currentPage - 1);  }  } Copy the code

The method is then called through the parent component

  • This delete method
open(index, row) {
      this.$confirm("This operation will permanently delete this data. Do you want to continue?"."Tip", {
        confirmButtonText: "Sure".        cancelButtonText: "Cancel".        type: "warning"
 })  .then((a)= > {  this.$axios  .post("api2/users/deleteStory", { _id: row._id })  .then(res= > {  var status = res.data.data.status;  if (status == 0) {  this.$message({  type: "success". message: "Deleted novel successfully!"  });  this.getAllStory();   // Call the jump method of the child component with this.$refs.myChild  this.$refs.mychild.handleDelete();    } else {  this.$message({  type: "waring". message: "Delete novel failed!"  });  }  });  })  .catch((a)= > {  this.$message({  type: "info". message: "Cancelled delete"  });  });  }, Copy the code

That wraps up the paging component, and finally we can happily call any component that needs paging

import pagination from "@/components/pagination";
export default {
    components: {
        pagination
    },
} Copy the code
<! - page - >
<pagination ref="mychild" :pagesizes=",3,4,5,6 [2]" :dateSource="bgDate" @showDate="showDate" />
Copy the code

Finally, show the page where the paging component is located




The following three warehouses are my graduation projects

Vue-based –Agoni Fiction site

Novel website background based on VUE and Element-UI

Based on Node and mongoDB development background interface

This article is formatted using MDNICE