最近做了一個日志搜索的需求，要在頁面上實現海量日志的關鍵字搜索。為了搜索更清晰，我最終實現了多條件搜索，且搜索結果的記錄中的關鍵字全部高亮。

專注于為中小企業(yè)提供成都網站設計、成都做網站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)泰和免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。

一、實現思路

1 實時監(jiān)控表格，實現關鍵字的定位；

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>

標題名稱：vue+Element實現搜索關鍵字高亮功能-創(chuàng)新互聯(lián)
文章鏈接：http://chinadenli.net/article8/shoip.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、App設計、網站收錄、商城網站、建站公司、域名注冊

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)