element分页

分页"/>

element分页

获取数据信息，这是表格和分页内容

<el-col :span="24"><div class="grid-content bg-purple-dark"><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="xuhao" label="序号"></el-table-column><el-table-column prop="createDate" label="日期"></el-table-column><el-table-column prop="username" label="操作人"></el-table-column><el-table-column prop="operation" label="操作人"></el-table-column><el-table-column prop="ip" label="IP地址"></el-table-column></el-table></div><div class="block" style="margin-top:15px;"><el-pagination align ="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50,100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="msgTotal"></el-pagination></div></el-col>

注释：tableDate是表格数据内容

          currentPage: 1, // 当前页码

          msgTotal: 0, // 总条数

          pageSize: 10 // 每页的数据条数

加载方法：

methods:{//每页条数改变时触发 选择一页显示多少行handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageSize = val;this.currentPage = 1;this.getMessagesList(this.currentPage,val);},//当前页改变时触发 跳转其他页handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = val;this.getMessagesList(val,this.pageSize);},//分页方法（重点）getMessagesList(k,v){this.$axios.get("接口"+'/'+ k +'/'+ v).then((res) => {this.tableData=[];if(!res.data){this.$message.error(this.msg.message);}else{const date_list = res.data.data.list.reverse()this.currentPage = res.data.data.pageNumthis.pageSize = res.data.data.pageSizethis.msgTotal = res.data.data.totalthis.tableData = date_list.map((key,value)=>{// key.xuhao = value+1key.xuhao = (k*v -v + value)+1 //用于排序，后台返回时该遍历方式就不用写，直接赋值就行key.createDate = key.createDatekey.username  = key.usernamekey.operation  = key.operationkey.ip  = key.ipreturn key})}}).catch((err) => {console.log(err);});}}

操作结果：