elementUI implement paging effect

And share with you a small paging (elementUI)

Miles lone necessarily cloudless, I go forward when you look back that of course Guling

effect

 

 

 Effect after search

 

 

 We did not talk much on the code

 structure

 

<! - page div -> 
    < div class = "pagingDive" > 
      < div class = "Block" > 
        < EL-pagination
           background 
          @ Change-size = "handleSizeChange" // current page 
          @ Current-Change = "handleCurrentChange" // article per page 
          : current-page.sync = "page" // bind this page 
          : page-size = "limit" a show // how many 
          layout = "Total, prev, pager, the Next" 
          : Total = "total" // bind the total number of 
          @ click.native = "tablePagination ()"// Click switching event 
        > </ EL-pagination >
      </div>
    </div>

 

Bound value

 

Data () {
    return { 
      
     // value tab to be bound 
      limit:. 8, // how many show a 
      Page:. 1, // this page 
      Total: "16", // total number of, 
      // receiving interface data 
      roleManagementList: [], 
   }   
}

 

Event methods

 

// Why re-call paging interface method in the interface method for searching and displaying data in a way to do that, if not see the need to click interface call data to show that the search is the same reason, but there is data showing the total number of required click it again to display the call will solve these problems
 // Check the interface === search interface 
    Dim () {
       the this $ ajax. 
        .post ( "/ Role / List" , { 
          name: the this .selectVal 
        }) 
        .then (RES => {
           the this .roleManagementList = res.data.data;
           the this .tablePagination (); 
          the console.log ( the this .roleManagementList, "fuzzy search ================" ); 
        } ); 
    } 
// check the interface 
    the getList () { 
      the let Val= { 
        The above mentioned id: the this .roleManagementList.id, 
        name: the this .roleManagementList.name, 
        UseStatus: the this .roleManagementList.useStatus,
        Page: this.roleManagementList.page, // tell the back-end I will give you back end also pass two parameters tab, then give him a pass in the past like the 
        limit: this two parameters .roleManagementList.limit // pass the current page and per page 
      }; 
      the this $ ajax.post ( "/ Role / List", Val). .then (RES => {
         the this .roleManagementList = res.data.data; 
        the console.log ( the this .roleManagementList);
         the this .tablePagination (); 
      });
    }    
// paging operation 
    handleCurrentChange (Val) {
       // this page 
      the this .page = Val;
       // Alert (this.page); 
      the console.log ( the this .page, "8,585,945,048,215" ); 
    }, 
    handleSizeChange: function (size) { 
      // page number of 
      the this .limit = size; 
      the console.log ( the this .limit); // page drop down display data 
    }
     / ** 
     * paging method table data 
     * / 
    tablePagination () { 
      the let Array = [ ], 
        StartNum = 0 , 
        endNum = 0;
      this.total = this.roleManagementList.length;
      startNum = (this.page - 1) * this.limit;
      if (this.page * this.limit < this.total) {
        endNum = this.page * this.limit;
      } else {
        endNum = this.total;
      }
      array = this.roleManagementList.slice(startNum, endNum);
      this= .roleManagementListArray; 
      the console.log (StartNum, endNum, "the total number of" ); 
      the console.log ( the this .page); 
    }, 
Created () { 
    // perform an interface view 
    the this .getList ();
     // tab perform 
    the this .tablePagination (); 
  }

 

monitor

 

Here also call data display method
 Watch: { 
    Total () { 
      // Note the name of the function must listen and you name the attribute data in the same order when your data in a property changes, this function is triggered 
      IF ( the this .total == ( the this .page -. 1) * the this .limit && the this .total = 0! ) {
         // this line of code is the key, multiple of 
        the this .page - =. 1 ;
         the this .getList (); // Get method table data 
      } 
    } 
  }