分页器vue+element ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页器</title>
</head>
<style type="text/css">
html {
width: 100%;
height: 100%;
background-color: white;
}
body {
margin: 0;
padding: 0;
height: 100%;
border: 0;
overflow: hidden;
}
.el-form-item__content {
line-height: 23px !important;
}
.flexToOne {
height: 20px;
}
</style>
<body>
<div id="app" style="padding: 15px;">
<div class="form-box marginB20">
<el-form :model="ruleForm" ref="loginFormRef" inline-message ref="ruleForm" label-position="top"
label-width="100px" class="demo-ruleForm">
</el-form>
</div>
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
border v-loading="loading" :height="tableHeight">
<el-table-column type="index" align="center" fixed="left" label="序号" width="100">
<template slot-scope="scope">
<div v-text="(currentPage-1)*pagesize+1+scope.$index"></div>
</template>
</el-table-column>
<el-table-column align="center" label="日志log" >
<template slot-scope="scope">
<div v-text="tableData[(currentPage-1)*pagesize+scope.$index]"></div>
</template>
</el-table-column>
<el-table-column align="center" label="地址ip" width="300">
<template slot-scope="scope">
<div v-text="tableDataa[(currentPage-1)*pagesize+scope.$index]"></div>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="250">
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination style="text-align: right;margin-top: 10px;" small @current-change="handleCurrentChange"
background @size-change="handleSizeChange" background :current-page="currentPage"
:page-size="pagesize"
:page-sizes="[10, 20, 30, 40]"
:total="tableData.length" layout="total,sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</body>
<script>
new Vue({
el: '#app',
data: function () {
return {
currentPage: 1,
pagesize: 10,
tableHeight: "300px",
tableData: [],
}
},
methods: {
toList() {
var that = this
that.loading = true;
axios.get(api.logmonitoring,
{
}).then(function (response) {
that.loading = false;
console.log(response.data.data);
var Ipconfig = [];
for (var i in response.data.data.address) {
Ipconfig.push(response.data.data.address)
}
that.tableData= response.data.data.allLogList
console.log(that.tableData);
that.tableDataa= Ipconfig
})
.catch(function (error) {
console.log(error);
});
},
handleSizeChange: function (val) {
console.log(`每页:${val}条`);
this.pagesize = val
console.log(1111111);
console.log(this.pagesize);
},
handleCurrentChange: function (currentPage) {
console.log(`当前页: ${currentPage}`);
this.currentPage = currentPage
console.log(22222222);
console.log(this.currentPage);
},
},
created() {
that.toList();
},
})
</script>
</html>