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


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了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+elementUI实现表格关键字筛选高亮

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 #Javascript
Vue实现搜索结果高亮显示关键字
May 28 #Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 #Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
小程序多图列表实现性能优化的方法步骤
May 28 #Javascript
实例详解带参数的 npm script
May 28 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Python实现图片识别加翻译功能
2019/12/26 Python
如何理解python对象
2020/06/21 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
大队干部竞选演讲稿
2014/04/28 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
农村老人去世追悼词
2015/06/23 职场文书
复活读书笔记
2015/06/29 职场文书
军事理论课感想
2015/08/11 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers