获取数据信息,这是表格和分页内容
<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.pageNum
this.pageSize = res.data.data.pageSize
this.msgTotal = res.data.data.total
this.tableData = date_list.map((key,value)=>{
// key.xuhao = value+1
key.xuhao = (k*v -v + value)+1 //用于排序,后台返回时该遍历方式就不用写,直接赋值就行
key.createDate = key.createDate
key.username = key.username
key.operation = key.operation
key.ip = key.ip
return key
})
}
})
.catch((err) => {
console.log(err);
});
}
}
操作结果: