vue+elementUI实现表格关键字筛选高亮

编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>

效果图:

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

更多vue学习教程请阅读专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板