<el-main>
<div class="dormitory">
<div class="searchWord">
<div style="display: inline-block">搜索:</div>
<el-input
v-model="search"
style="display: inline-block;width: 1300px"
placeholder="请输入搜索内容"
></el-input>
</div>
</div>
<el-table
:data="tables.slice((currentPage - 1) * pagesize, currentPage*pagesize)"
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>
<div class="block" v-if="pageshow">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="count"
></el-pagination>
<el-button @click="except">下载表格</el-button>
</div>
</el-main>
<script>
export default {
data() {
return {
tableData2: [], //数据
search: "",
rows: 100, //每页显示100条数据
page: 1, //当前页码
count: 0, //总纪录条数
pagesize: 10,
currentPage: 1,
options4: [],
value9: [],
list: [],
loading: false,
states: [],
pageshow:true,
};
},
computed: {
// 模糊搜索
tables() {
const search = this.search;
if (search) {
// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意: filter() 不会对空数组进行检测。
// 注意: filter() 不会改变原始数组。
return this.tableData2.filter((data) => {
// some() 方法用于检测数组中的元素是否满足指定条件;
// some() 方法会依次执行数组的每个元素:
// 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;
// 如果没有满足条件的元素,则返回false。
// 注意: some() 不会对空数组进行检测。
// 注意: some() 不会改变原始数组。
return Object.keys(data).some((key) => {
// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置,如果没有找到就返回-1;
// 该方法对大小写敏感!所以之前需要toLowerCase()方法将所有查询到内容变为小写。
return String(data[key]).toLowerCase().indexOf(search) > -1;
});
});
}
return this.tableData2;
},
},
methods: {
//导出数据为Excel
except(){
require.ensure([],()=>{
const {export_json_to_excel}=require("../excel/Export2Excel")//excel地址
const tHeader=["主机id","主机"]//表头
const filterVal=['hostid','host']//对应数据字段
const list=this.tableData2;//表数据
const data=this.formatJson(filterVal,list)
export_json_to_excel(tHeader,data,'主机信息')//表名
})
},
formatJson(filterVal,jsonData){
return jsonData.map(v=>filterVal.map(j=>v[j]))
},
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://******", {
jsonrpc: "2.0",
method: "host.get",
params: {
output: ["hostid", "host"],
selectInterfaces: ["interfaceid", "ip"],
},
id: 2,
auth: datas,
})
.then((res) => {
let resData = res.data.result;
let resDatas = [];
for (var i = 0; i < resData.length; i++) {
this.options4.push(resData[i].hostid);
resDatas.push(resData[i].host, resData[i].hostid);
// this.states.push(res.data.result[i].hostid)
// console.log(this.options4);
}
console.log(resData[1].interfaces[0].ip)
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.pagesize = val;
},
handleCurrentChange(page) {
console.log(`当前页:${page}`)
this.currentPage=page; //把当前页码赋给currentPage
},
//搜索
remoteMethod(query) {
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options4 = this.list.filter((item) => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options4 = [];
}
},
},
mounted() {
var data = sessionStorage.getItem("data");
if (!data) {
this.$router.push({ name: "Login" });
}
this.axiosData();
this.list = this.states.map((item) => {
return { value: item, label: item };
});
this.$nextTick(() => {
this.pageshow = true
})
},
};
</script>