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闭包 实例分析
Dec 25 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 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
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
用python爬取租房网站信息的代码
2018/12/14 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python如何随机生成高强度密码
2020/08/19 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
矫正人员思想汇报
2014/01/08 职场文书
领导失职检讨书
2014/02/24 职场文书
新学期决心书
2014/03/11 职场文书
数控专业自荐书范文
2014/03/16 职场文书
实习指导老师评语
2014/04/26 职场文书
部门年终奖分配方案
2014/05/07 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
找工作求职信
2014/07/07 职场文书
三好生演讲稿
2014/09/12 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书