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 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
jquery 图片轮换效果
Jul 29 Javascript
js异常捕获方法介绍
Apr 10 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jQuery filter函数使用方法
May 19 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 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
中国第一家无线电行
2021/03/01 无线电
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python3.6简单反射操作示例
2018/06/14 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python远程连接MySQL数据库
2019/04/19 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python设置中文界面实例方法
2020/10/27 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
介绍下java.util.Arrays类
2012/10/16 面试题
程序员求职信
2014/04/16 职场文书
python manim实现排序算法动画示例
2022/08/14 Python