Element, 'Hungry', a Vue 2.0 based desktop component library for developers, designers and product managers. Use this paging component to record the pitfalls encountered.

Components:

 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

Js code:

 data() { return { list: [], Total: 0,//Total records CurrentPage: 1,//The current page PageSize: 10,//The size of each page SearchMap: {},//Query conditions DialogFormVisible: false,//Whether the editing window is visible Pojo: {},//Edit the entity object bound by the form Id: ''//The ID modified by the current user } }

Method code:

 fetchData() { userApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => { this.list = response.data.rows this.total = response.data.total }) }, handleSizeChange(val) { //Automatically triggered when the number of displayed items per page is changed this.pageSize = val;  // Dynamically change the size of each page userApi.search(this.currentPage, val, this.searchMap).then(response => { this.list = response.data.rows this.total = response.data.total }) }, handleCurrentChange(val) { //Trigger this function after the current page number changes this.currentPage = val;    // Dynamically change the current page userApi.search(val, this.pageSize, this.searchMap).then(response => { this.list = response.data.rows this.total = response.data.total }) }

Time stamp converted to common time method code:

 timestampToTime (row, column) { Var date=new Date (row. regdate)//A time stamp of 10 bits requires * 1000, and a time stamp of 13 bits does not need to multiply by 1000 var Y = date.getFullYear() + '-' var M = (date.getMonth()+1 < 10 ? ' 0'+(date.getMonth()+1) : date.getMonth()+1) + '-' var D = date.getDate() + ' ' var h = date.getHours() + ':' var m = date.getMinutes() + ':' var s = date.getSeconds() return Y+M+D+h+m+s }

use:

 <el table column prop="regdate" label="Registration date": format="timestampToTime"></el table column> <el table column prop="updatedate" label="modification date": format="timestampToTime"></el table column>

Summary: Pay special attention to the dynamic modification of the corresponding page number every time you switch between page numbers and display volumes. Otherwise, the page numbers will be switched or the default 10 data volumes will be displayed. The code has comments, which can be viewed (//the current page will be dynamically changed)