最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索。为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮。
一、实现思路
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">