vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示

news/2024/7/8 0:37:48

vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示
最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果:

1、在需要搜索的列用 v-html=“showDate(scope.row.house_village_info.hvi_province)” showDate是自定义的方法,如图所示:

2、在methods中写,showDate方法(方法名可以自定,调用一直就可以了)方法如下:

// this.page.searchCode 是指的搜索的关键词
 showDate(val) {
      if (
        val.indexOf(this.page.searchCode) !== -1 && 
        this.page.searchCode !== ''
      ) {
        return val.replace(
          this.page.searchCode,
          '<font color="#f00">' + this.page.searchCode + '</font>'
        )
      } else {
        return val
      }
    }

这样就可以搞定了,搜索高亮显示关键词了。


http://lihuaxi.xjx100.cn/news/1903410.html

相关文章

Wireshark插件开发

第一章&#xff1a;Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧&#xff1a;过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章&#xff1a;网络协议分析 2.1 网络协议分析&#xff1a;TCP、UDP、ICMP等 2.2 高级协议分析&#xff1a;HTTP…

SLAM实践 -- 利用ROS实时运行ORB-SLAM2

利用ROS实时运行ORB-SLAM2 1.启动ROS: roscore2.打开摄像头&#xff08;笔者使用的相机是奥比中光的Astra S深度相机&#xff09;&#xff1a; roslaunch astra_camera astra.launch在/ORB_SLAM2/Examples/ROS/ORB_SLAM2/src目录下找到ros_mono.cc&#xff0c;进行以下修改&…

【数据分享】2019-2023年我国地级市逐年新房房价数据(免费获取/Excel/Shp格式)

房价是一个城市发展程度的重要体现&#xff0c;一个城市的房价越高通常代表这个城市越发达&#xff0c;对于人口的吸引力越大&#xff01;因此&#xff0c;房价数据是我们在各项城市研究中都非常常用的数据&#xff01;之前我们分享了2019—2023年我国地级市逐月的新房房价数据…

python接口自动化测试--requests使用和基本方法封装

之前学习了使用jmeterant做接口测试&#xff0c;并实现了接口的批量维护管理(大概500多条用例)&#xff0c;对“接口”以及“接口测试”有了一个基础了解&#xff0c;最近找了一些用python做接口测试的资料&#xff0c;一方面为了学习下如何使用python进行接口测试(如何做出一个…

C++ 字符串移位包含问题

对于一个字符串来说&#xff0c;定义一次循环移位操作为&#xff1a;将字符串的第一个字符移动到末尾形成新的字符串。 给定两个字符串 s1 和 s2 &#xff0c;要求判定其中一个字符串是否是另一字符串通过若干次循环移位后的新字符串的子串。 例如 CDAA 是由 AABCD 两次移位后…

React-Router v6设置默认路由

参考连接: https://www.soinside.com/question/rH6pzCBpqbVnntVKTnQ4oY 方式1 代码如下&#xff08;示例&#xff09;&#xff1a; 关键字 index<Routes><Route path"/"><Route index element{<ComponentA />} /><Route path"pat…

【spark】spark内核调度(重点理解)

目录 spark内核调度DAGDAG的宽窄依赖和阶段划分内存迭代计算面试题Spark是怎样做内存计算的&#xff1f;DAG的作用是什么&#xff1f;Stage阶段划分的作用&#xff1f;Spark为什么比MapReduce快 spark并行度如何设置并行度&#xff1a;spark.default.parallelism集群中如何规划…

算法(2)——滑动窗口

前言&#xff1a; 步骤及算法模板&#xff1a; 确定两个指针变量&#xff0c;left0,right0; 进窗口&#xff1a; 判断&#xff1a; 出窗口 更新结果 接下来我们的所用滑动窗口解决问题都需要以上几个步骤。 一、长度最小的子数组 209. 长度最小的子数组 - 力扣&#xff08;L…