这篇文章主要讲解了“Element布局实现条件过滤查询的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Element布局实现条件过滤查询的方法”吧！
计算
安全
数据库
网络和加速
企业服务
<div id="app" >
<el-row>
<el-col :span="18" :offset="3">
<el-row :gutter="40">
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="告警时间">
<el-date-picker
v-model="searchDayRange"
type="daterange"
range-separator="-"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="IP地址">
<el-input v-model="searchIp" placeholder="请输入IP地址"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="告警类型">
<el-select v-model="searchAlarmLevel" placeholder="请选择" >
<el-option v-for="item in alarmType" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="搜索内容">
<el-input v-model="searchContent" placeholder="请输入搜索内容"></el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="设备类型">
<el-select v-model="searchDeviceType" placeholder="请选择设备类型" >
<el-option v-for="item in deviceType" :key="item.type" :label="item.type_cn" :value="item.type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否修复">
<el-select v-model="searchStatus" placeholder="请选择" >
<el-option v-for="item in status" :key="item.label" :label="item.label" :value="item.label"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row>
<el-col :span="4" :offset="20">
<el-button type="primary" @click="getSearch">搜索</el-button>
<el-button type="warning" @click="clearData">清空</el-button>
</el-col>
</el-row>
<el-row >
<el-table :data="alarmData" border >
<el-table-column prop="id" label="告警ID"></el-table-column>
<el-table-column prop="ip" label="IP地址"></el-table-column>
<el-table-column prop="alarm_type_cn" label="设备类型"></el-table-column>
<el-table-column prop="monitor_name" label="监控名称"></el-table-column>
<el-table-column prop="title" label="故障内容"></el-table-column>
<el-table-column prop="monitor_level" label="告警等级"></el-table-column>
<el-table-column prop="appear_time" label="告警时间"></el-table-column>
<el-table-column prop="recover_time" label="恢复时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleAlarm(scope.row)" type="primary" size="small">已知晓</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum">
</el-pagination>
</el-row>
</el-col>
</el-row>
</div><script type="text/javascript">
new Vue({
el: '#app',
data: {
searchDayRange: '',
searchAlarmLevel: '全部',
searchDeviceType: '',
searchIp: '',
start: '',
end: '',
loading: false,
searchContent: '',
searchStatus: '全部',
deviceType: [],
alarmData: [],
pageSize: 20,
totalNum: 0,
currentPage: 1,
alarmType:[
{
"label":"全部",
"value":"全部"
},
{
"label":"轻微",
"value":"轻微"
},
{
"label":"一般",
"value":"一般"
},
{
"label":"严重",
"value":"严重"
}
],
StatusData: [
{
"label":"全部",
"value":"全部"
},
{
"label":"已恢复",
"value":"已恢复"
},
{
"label":"未恢复",
"value":"未恢复"
}
]
},
mounted() {
axios.get(site_url + "device_type/").then(res => {
if (res.data.result) {
this.deviceType = res.data.data
} else {
this.$message.error('请求失败')
}
}, 'json');
// 页面加载就获取所有模板
this.init()
},
methods: {
init() {
params = {};
this.search(params)
},
getSearch() {
if(typeof(this.searchDayRange) == "undefined" || this.searchDayRange == null || this.searchDayRange == ""){
this.start = "";
this.end = ""
} else {
this.start = this.searchDayRange[0];
this.end = this.searchDayRange[1]
}
params = {
start: this.start,
end: this.end,
alarm_level: this.searchAlarmLevel,
device_type: this.searchDeviceType,
search_ip: this.searchIp,
query_str: this.searchContent,
status: this.searchStatus
};
this.search(params)
},
search(params) {
this.loading = true;
axios({
methods: 'get',
url: site_url + 'alarm/',
params: params
})
.then(res => {
if(res.data.result){
this.loading = false;
this.alarmData = res.data.data.data;
this.totalNum = res.data.data.count;
} else {
this.$message.error('请求失败')
}
}).catch(error => {
this.loading = false;
this.$message.error('请求失败')
});
},
clearData() {
this.searchDayRange = [];
this.searchAlarmLevel = '全部';
this.searchDeviceType = '';
this.searchIp = '';
this.searchContent = '';
this.searchStatus = '全部';
},
handleSizeChange(val) {
this.pageSize = val;
params = {
start: this.searchDayRange[0],
end: this.searchDayRange[1],
alarm_level: this.searchAlarmLevel,
device_type: this.searchDeviceType,
search_ip: this.searchIp,
query_str: this.searchContent,
status: this.searchStatus,
page: this.currentPage,
page_size: this.pageSize
};
this.search(params)
},
handleCurrentChange(val) {
this.currentPage = val;
params = {
start: this.searchDayRange[0],
end: this.searchDayRange[1],
alarm_level: this.searchAlarmLevel,
device_type: this.searchDeviceType,
search_ip: this.searchIp,
query_str: this.searchContent,
status: this.searchStatus,
page: this.currentPage,
page_size: this.pageSize
};
this.search(params)
}
}
})
</script>实现效果
感谢各位的阅读，以上就是“Element布局实现条件过滤查询的方法”的内容了，经过本文的学习后，相信大家对Element布局实现条件过滤查询的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/renpingsheng/blog/3119389
