大体思路及步骤
//1.axios,npm i axios 项目中引入 const axios = require("axios");
//get post数据
//3. this.tableData2=res.data.result;成功返回数据给表格 返回分页数据总 this.count=res.data.result.length
//4.分页 <el-pagination
// @size-change="handleSizeChange"
// @current-change="handleCurrentChange"
// :current-page="page"
// :page-size="20"
// layout="total, sizes, prev, pager, next, jumper"
// :total="count"
// ></el-pagination>
// 4.5 data：data() {
// return {
// tableData2: [],//数据
// rows:20, //每页显示20条数据
// page:1, //当前页码
// count:0, //总纪录条数
// pageSize:5,
// };
// },
// 5. methods：{ handleSizeChange(val) {
// this.rows=val;
// },
// handleCurrentChange(page) {
// this.page=page;
// },
// }
<template>
<div class="home">
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>导航一
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>导航二
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-setting"></i>导航三
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column prop="hostid" label="hostid" width="180"></el-table-column>
<el-table-column prop="host" label="host" width="180"></el-table-column>
<!-- <el-table-column prop="interfaceid" label="interfaceid" width="180"></el-table-column>
<el-table-column prop="ip" label="ip"></el-table-column> -->
</el-table>
<!-- :page-size="rows" -->
<!-- :current-page="currentPage4" -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-size="20"
layout="total, sizes, prev, pager, next, jumper"
:total="count"
></el-pagination>
<!-- <el-button @click="exportExcel" >下载表格</el-button> -->
</div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
.el-container {
height: 710px !important;
}
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
//1.axios,npm i axios 项目中引入 const axios = require("axios");
//get post数据
//3. this.tableData2=res.data.result;成功返回数据给表格 返回分页数据总 this.count=res.data.result.length
//4.分页 <el-pagination
// @size-change="handleSizeChange"
// @current-change="handleCurrentChange"
// :current-page="page"
// :page-size="20"
// layout="total, sizes, prev, pager, next, jumper"
// :total="count"
// ></el-pagination>
// 4.5 data：data() {
// return {
// tableData2: [],//数据
// rows:20, //每页显示20条数据
// page:1, //当前页码
// count:0, //总纪录条数
// pageSize:5,
// };
// },
// 5. methods：{ handleSizeChange(val) {
// this.rows=val;
// },
// handleCurrentChange(page) {
// this.page=page;
// },
// }
export default {
data() {
return {
tableData2: [],//数据
rows:20, //每页显示20条数据
page:1, //当前页码
count:0, //总纪录条数
pageSize:5,
};
},
methods: {
tableRowClassName({ rowIndex }) {
if (rowIndex === 1) {
return "warning-row";
} else if (rowIndex === 3) {
return "success-row";
}
return "";
},
axiosData() {
const axios = require("axios");
var datas = sessionStorage.getItem("data");
axios
.post("http://192.168.2.239/api_jsonrpc.php", {
jsonrpc: "2.0",
method: "host.get",
params: {
output: ["hostid", "host"],
// limit:this.rows,
// page:this.page,
// parmas:page,
selectInterfaces: ["interfaceid", "ip"],
},
id: 2,
auth: datas,
})
.then(res => {
console.log(res.data.result);
console.log(res)
this.tableData2=res.data.result;
this.count=res.data.result.length
console.log(this.tableData2)
})
.catch(function (error) {
console.log(error);
});
},
handleSizeChange(val) {
this.rows=val;
},
handleCurrentChange(page) {
this.page=page;
},
},
mounted() {
var data = sessionStorage.getItem("data");
if (!data) {
this.$router.push({ name: "Login" });
}
this.axiosData();
},
};
</script>
