vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示
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}}
这样就可以搞定了，搜索高亮显示关键词了。
vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示相关推荐
- vue搜索关键字标红
实现效果:搜索框搜索关键字后,搜索出的列表名称关键字标红 页面内容:如果包含关键字则拆分成三个字段拼接,不包含刚直接显示字段 <label v-if="item.contain == ...
- echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红 写的很详细，建议收藏！
前言 网上找了好久资料,没有一个完整实例,所以研究出来立马发布,共享下,希望能帮助到大家. 一.实现效果 方式1:提供视频方式大家看下符不符合要求 方式2:Demo演示地址 点击此处,可查看演示地址 ...
- 实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）
类似于百度的搜索框,当输入一个字或词的时候,自动检索有没有该内容,有的话把输入的关键字标红 代码如下: <!DOCTYPE html> <html lang="en&quo ...
- vue element 实现table的自动添加列
前提 由于每个同学的考试的科目可能不一样,但是老师统计的时候需要获取到每个同学的科目分数.结果如下 后端返回的数据格式如下 [{"id":1,"sid":&qu ...
- Vue实现搜索关键字标红高亮加粗
博主介绍
- element 给table设置thead和tbody
用Element的table时需要定义表格的高度和背景效果 .el-table .el-table__header-wrapper>table>thead>tr>th{heig ...
- element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式 在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
最新文章
- WMI Series :管理对象的信息查询和方法访问
- 【运筹学】线性规划数学模型 ( 单纯形法 | 第一次迭代 | 方程组同解变换 | 计算新单纯形表 | 计算检验数 | 入基变量选择 | 出基变量选择 )
- Java基础---网络编程
- 实例54:python
- 小程序[渲染层网络层错误] failed to load image_游戏中水的渲染技术
- iOS.Dev.Support.MultiVersions
- Pandas使用DataFrame进行数据分析比赛进阶之路（一）
- 极域电子教室常见问题的解决方法
- 练习1000 scanf 用法
- win10无法打印网页：打印机遇到异常配置问题0x8007007e 的解决方法
- PADA: Example-based Prompt Learning for on-the-fly Adaptation to Unseen Domains
- 报错：跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
- jq 获取input的光标，定位光标的位置
- 【uniapp】微信小程序国际化详细版
- aws mysql 多区_Amazon RDS 多可用区部署
- 嵌入式远程岗位、兼职、接单、众包平台
- 720phi10p 和 720p有什么区别_很多人都在都使用视频采集卡，那视频采集卡有几种？有什么特点和区别？...
- acrh17华硕固件_华硕路由器Asus RT-ACRH17 OpenWrt，刷openwrt教程
- 外星人做系统logo,外星人开机logo win10
- Unity3D 插件 Mesh To Terrain的使用方法