这篇文章主要讲解了“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布局实现条件过滤查询的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
