溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
