vue+elementUI實現表格關鍵字篩選高亮

這篇文章主要爲大家詳細介紹了vue+elementUI實現表格關鍵字篩選高亮，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文實例爲大家分享了vue elementUI表格關鍵字篩選高亮的具體代碼，供大家參考，具體內容如下

代碼：

<template>
 <div class="">
  <div class="top">
  <!-- 篩選 -->
   <div class="screen">
    <div style="width:30%">篩選：</div>
    <el-input type="search" v-model="search" style="width:70%" placeholder="請輸入關鍵字"></el-input>
   </div>
  </div>
  <!-- 表格 -->
  <div class="table">
   <el-table
    :data="tables"
    style="width: 100%"
    max-height=500>
   <!-- 地址 -->
    <el-table-column label="時間">
     <template slot-scope="scope"> 
      <span class="col-cont" v-html="showDate(scope.row.date)" ></span>
     </template>
    </el-table-column>
    <!-- 用戶名 -->
    <el-table-column label="用戶名">
     <template slot-scope="scope">
      <span class="col-cont" v-html="showDate(scope.row.name)" ></span>
     </template>
    </el-table-column>
    <!-- 地址 -->
    <el-table-column label="地址">
     <template slot-scope="scope">
      <span class="col-cont" v-html="showDate(scope.row.address)" ></span>
     </template>
    </el-table-column> 
   </el-table>
  </div>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    search: '',
    tableData: [{
     date: '2016-05-02',
     name: '張三',
     address: '上海市普陀區金沙江路 1518 弄'
    }, {
     date: '2016-05-04',
     name: '李四',
     address: '上海市普陀區金沙江路 1517 弄'
    }, {
     date: '2016-05-01',
     name: '王五',
     address: '上海市普陀區金沙江路 1519 弄'
    }, {
     date: '2016-05-03',
     name: '趙六',
     address: '上海市普陀區金沙江路 1516 弄'
    }]
   }
  },
  components: {},
  computed: {
  // 實時監聽表格
   tables: function() {
    const search = this.search
    if (search) {
     return this.tableData.filter(dataNews => {
      return Object.keys(dataNews).some(key => {
       return String(dataNews[key]).toLowerCase().indexOf(search) > -1
      })
     })
    }
    return this.tableData
   }
  },
  mounted() {},
  methods: {
   // 篩選變色
   showDate(val) {
    val = val + '';
    if (val.indexOf(this.search) !== -1 && this.search !== '') {
     return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')
    } else {
     return val
    }
   }
  }
 }
</script>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。