elementUI tab Package - Update

elementUI tab Package - Update (linked to a backend interface, to the parent component to trigger sub-assembly and handling asynchronous events)

Here I use a timer to solve the asynchronous

Ladders say that life is not a shortcut to success, and for this reason never to question their own

Paging component

 

<template>
  <div class="pagingDive">
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total" @click.native="pageClick()"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "paging",
  props:{ 
  },cardManagementVal: Array // parent component receives all the data coming, PageCount: Object, // receiving paging information coming from the parent component
       

    
    
  Data () { 
    return { 
　　　　// props receiving paging information coming from the parent component for the following assignment operations 
      limit: this.pageCount.limit, 
      Page: this.pageCount.page, 
      Total: this.pageCount.total, 
      Ary: [ ] // empty array defines a parent component passed 
    }; 
  }, 
  Watch: {}, 
  computed: {}, 
  Methods: { handleCurrentChange (Val) { 
      this.page = Val; 
    }, 
    handleSizeChange: function (size) { 
      the this. = size limit; 
    }, // page click event execution paging　　 pageClick () { this.tablePagination (); 
    }, tablePagination () { 
      the let Array = [], 
        StartNum = 0, 
        endNum = 0;
   
　　
    
      
    
      = this.cardManagementVal.length this.total; 
      StartNum = (this.page -. 1) * this.limit; 
      IF (* this.limit this.page <this.total) { 
        endNum = this.page * this.limit; 
      } {the else 
        endNum = this.total; 
      } 
      array = this.cardManagementVal.slice (StartNum, endNum); 
      this.Ary = array; // new array just defined has acquired all the data 
      . this $ emit ( "pageHandel" , this .Ary); // data via the new custom event to a parent element and to perform the replacement 
    } 
  }, 
  Created () { 
　　// perform paging method of acquiring first data 
    this.tablePagination (); 
  }, 
  Mounted () {} 
} ; 
</ Script> 
<style lang = "SCSS" scoped> 
.pagingDive { 
  width: 100%; 
  height: 140px; 
  background: #fff;
  padding-left: 32px;
  padding-right: 32px;
  line-height: 140px;
  /deep/.el-pagination {
    display: flex;
    align-items: center;
    .el-pager,
    .el-pager li {
      vertical-align: middle;
    }
  }
}
</style>

 

 

---

 

 

---

 

Call paging component

Here used ref and timers, as well as traditional values, calling sub-component events

Do not forget to replace the value in the table is an array of data bindings page redefined

structure:

<Border the Table: Columns = " columns12 "  : Data = "Ary" > </ the Table> <- - replaced by a new array is redefined method tab!>
 
<COM- Page
         :, pageCount = ", pageCount "// pass the values defined tab subassemblies 
        : cardManagementVal =" cardManagementVal "// pass the data in the table subassembly 
        @ pageHandel =" pageHandel "// receiving method and transmission subassembly assign a new value 
        ref =" myChild "// ref call by paging method subassembly for displaying data 
> </ com-page>

The introduction of paging component:

import Page from "../../common/paging/index.vue";
components: {"com-page": Page}

data as defined in:

 

, pageCount: { 
        limit:. 8, 
        Page:. 1, 
        Total: "16" 
}, 
Ary: [], // the new array is defined in the new data is assigned to the sub-assembly in the binding table data 
cardManagementVal: [] // All back-end data

 

event:

 

// display data interfaces 
the getList () { 
      const REQ = {...}; 
      cardLook (REQ) .then (RES => {
         IF (res.data.code == "200 is") {
          this.c ardManagementVal = RES .data.data.rows; // All data backend 
          the setTimeout (() => {// timer solution using asynchronous call paging subassembly 
            this.myChild (); 
          }, 0); 
          this.cardManagementVal.map ( = Item> {}); 
        } the else { 
          return to false; 
        } 
      }); 
}, 
// subassembly receives new data transmitted and used to bind to the data in the table 
pageHandel (Val) { 
      this.Ary = Val; 
} , 
// acquired subassembly and call paging subassembly data for displaying by ref 
myChild () {
      $ refs.myChild.tablePagination the this ();. 
}, 
custom event receiver method and subassembly // performed directly transmitted to the display data obtaining new data 
Created () {
     this.getList ();
     the this .pageHandel () ; 
}