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

 更新时间:2019年05月28日 14:44:58   作者:木子Leo   我要评论
这篇文章主要为大家详细介绍了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中的extend绑定节点并显示的方法

    Vue.js中的extend绑定节点并显示的方法

    在本篇内容里小编给大家整理了关于Vue.js中的extend绑定节点并显示的方法以及相关知识点,需要的朋友们学习下。
    2019-06-06
  • Vue 中文本内容超出规定行数后展开收起的处理的实现方法

    Vue 中文本内容超出规定行数后展开收起的处理的实现方法

    这篇文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解VUE调用本地json的使用方法

    详解VUE调用本地json的使用方法

    这篇文章主要介绍了VUE调用本地json的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    仿vue-cli搭建属于自己的脚手架的方法步骤

    这篇文章主要介绍了仿vue-cli搭建属于自己的脚手架的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue.js 图标选择组件实践详解

    Vue.js 图标选择组件实践详解

    这篇文章主要介绍了Vue.js 图标选择组件实践详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue 标签属性数据绑定和拼接的实现方法

    vue 标签属性数据绑定和拼接的实现方法

    这篇文章主要介绍了vue 标签属性数据绑定和拼接的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue中$refs的用法及作用详解

    vue中$refs的用法及作用详解

    这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue中keep-alive组件的入门使用教程

    vue中keep-alive组件的入门使用教程

    这篇文章主要给大家介绍了关于vue中keep-alive组件的入门使用教程,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 深入理解Vue 的条件渲染和列表渲染

    深入理解Vue 的条件渲染和列表渲染

    本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 在vue项目中引入highcharts图表的方法(详解)

    在vue项目中引入highcharts图表的方法(详解)

    下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解),具有很好的参考价值,希望对大家有所帮助
    2018-03-03

最新评论