vue+Element实现搜索关键字高亮功能

本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码，供大家参考，具体内容如下

代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

<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>

效果图：

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。