溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近做了一個日志搜索的需求，要在頁面上實現海量日志的關鍵字搜索。為了搜索更清晰，我最終實現了多條件搜索，且搜索結果的記錄中的關鍵字全部高亮。
一、實現思路
1 實時監控表格，實現關鍵字的定位；
2 點擊搜索按鈕以后，實現記錄中關鍵字的樣式變化（即高亮）。
二、實現過程
1 搜索條件表單
了解了實現思路，就讓我們一起來看一下實現過程（關鍵位置均給了注釋）
<el-form :inline="true" :model="formQuery" > <el-row> <el-col :span="8"> <el-form-item label="日志編碼" > <el-input v-model="formQuery.queryMessage1" ></el-input> </el-form-item> </el-col> <el-col :span="8" > <el-form-item label="日志編碼2"> <el-input v-model="formQuery.queryMessage2" ></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="20"> <el-form-item label="日志編碼3"> <el-input v-model="formQuery.queryMessage3" ></el-input> </el-form-item> </el-col> <el-col :span="4"> <el-form-item> <el-button @click="loadData()" >查詢</el-button> </el-form-item> </el-col> </el-row> </el-form>
2 表格部分
<el-table :fit="true" ref="logInfosData" max-height="700" :data="logInfosData"
element-loading-text="loading" :highlight-current-row="true"
size="mini" >
<el-table-column prop="_source.message" :label="$t('Loginformation')" sortable >
<template slot-scope="scope">
<span v-html="showData(message)"
== <!--注意此處的寫法,該函數showData返回的結果是一段HTML代碼，在這里是直接進行填充，填充的內容是修改了關鍵字樣式以后的內容。-->==
></span>
</template>
</el-table-column>
</el-table>
3.實時監聽表格
computed:{
// 實時監聽表格
tables: function() {
const search = this.listQuery.queryMessage||this.listQuery.queryMessage2||this.listQuery.queryMessage3
if (search) {
return this.logInfosData.filter(dataNews => {
return Object.keys(dataNews).some(key => {
return String(dataNews[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
}
4.修改關鍵字樣式
// 篩選變色
showData(val) {
val = val + '';
if (this.checkPara(val,this.listQuery.queryMessage)||this.checkPara(val,this.listQuery.queryMessage2)
||this.checkPara(val,this.listQuery.queryMessage3)) {
//如果搜索結果記錄包含關鍵字中的任何一個，那么修改樣式
return val.replace(this.listQuery.queryMessage'<font color="#409EFF">' + this.listQuery.prodcd + '</font>')
.replace(this.listQuery.queryMessage2, '<font color="#409EFF">' + this.listQuery.queryMessage3 + '</font>')
} else {
return val //不做任何修改
}
},
//判斷搜索記錄是否包含某個關鍵字
checkPara(val,para){
if (val.indexOf(para) !== -1 && para !== ''){
return true;
}else {
return false
}
}
三、總結
實現以后會覺得思路很簡單。其實任何一個多么復雜的需求，只要在做之前，理清思路，分成一個個小的實現過程，那么就自然很簡單，而且效率也很高。這也是我的真切感受。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
