搜索列表高亮值

最新推荐文章于 2024-03-20 18:04:52 发布
最新推荐文章于 2024-03-20 18:04:52 发布
阅读量276 收藏
点赞数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div id="myVue">
        <el-row>
            <el-col :span="16" :offset="4">
         
                
                <el-input v-model="search" placeholder="请输入内容"></el-input>
                    <div class="tableRef" id="tableRef" ref="tableRef">
                        <el-table
                            :data="tables"
                            style="width: 100%">
                            <el-table-column
                                label="日期"
                                width="180">
                                <template slot-scope="scope">
                                    <span class="col-cont" v-html="showDate(scope.row.date)" ></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="姓名"
                                width="180">
                                <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>
            </el-col>
        </el-row>
    </div>
        <script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
<script type="text/javascript">
            new Vue({
                el: '#myVue',
                data: {
                    search: '',
                    tableData: [{
                        date: '2015-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2017-05-04',
                        name: '无浩然',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2017-05-04',
                        name: '吴浩然',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2018-05-01',
                        name: '小狮子',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2019-05-03',
                        name: '大城西',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }]
                },
                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
                    }
                },
                methods: {
                    showDate (val) {
                        if (val.indexOf(this.search) !== -1 && this.search !== '') {
                            return val.replace(this.search, '<font color="#409EFF">' + this.search + '</font>')
                        } else {
                            return val
                        }
                    }
                }
            })
        </script>
</body>
</html>
h398520202
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 搜索功能 SearchView+RecyclerView实现 搜索结果高亮显示
12-10
android 搜索功能 SearchView+RecyclerView实现 搜索结果高亮显示，android studio工程，导入就可以正常使用
DataTables 搜索高亮
huangkang1995的博客
03-07 228
DataTables 搜索高亮 官方链接 介绍 http://datatables.club/blog/2014/10/22/search-result-highlighting.html 需要多引入一个js http://bartaz.github.io/sandbox.js/jquery.highlight.js js 代码 $(document).ready( function () { ...
搜索功能实现搜索关键字高亮显示
weixin_44134588的博客
10-24 1640
1使用插槽,使用v-html进行渲染 //v-html指令用于将HTML片段填充到标签中， <div slot="title" v-html="highlightText(text)"></div> text为从搜索关键字得出的搜索建议数组中遍历出来的字符串 2 使用正则替换,将搜索关键字替换为由标签＋样式包裹的字符串 使用字面量的方式创建正则表达式无法使用变量,所以要使用构造函数创建 // 处理高亮 highlightText(text) { const
搜素联想列表关键文字高亮
weixin_59324977的博客
10-22 167
主要原理: <span style="color:red;">关键字</span> ,找到关键字加样式 <!-- 搜索联想建议列表 --> <div class="sugg-list" v-if="kw.length > 0"> <div class="sugg-item" v-for="(Str, index) in sugList" :key="index" ..
列表搜索高亮显示
yangzongbin的专栏
10-24 1156
public class KeywordUtil { /** * 关键字高亮变色 * * @param color * 变化的色值 * @param text * 文字 * @param keyword * 文字中的关键字 * @re...
Android基于RecyclerView实现高亮搜索列表
08-31
实现高亮搜索列表通常涉及到以下几个关键知识点： 1. **RecyclerView的基本使用**： RecyclerView是Android SDK提供的一种更加灵活、高效的列表视图，替代了之前的ListView。它允许开发者自定义Item的布局，通过...
JavaScript实现的搜索及高亮显示功能示例
10-19
在本文中，我们将深入探讨如何使用JavaScript实现搜索及高亮显示功能。这个功能通常用于网页上的数据筛选，特别是当数据量较小，无需服务器端处理时。我们将分析提供的代码示例，了解其工作原理，并讨论关键的...
前端实现页面搜索高亮
11-08
"前端实现页面搜索高亮"这一技术就是用来实现这种用户体验的。在这个主题中，我们将深入探讨如何利用JavaScript，特别是jQuery库来实现这一功能。 首先，JavaScript作为客户端脚本语言，可以对网页内容进行动态操作...
微信小程序实现全局搜索代码高亮的示例
08-27
微信小程序实现全局搜索代码高亮的示例 微信小程序实现全局搜索代码高亮的示例是指在微信小程序中实现搜索框的输入内容时，实现全局匹配并高亮显示的效果。本示例主要介绍了如何通过递归方法来遍历后台返回的数据，...
vue中搜索时，搜索结果高亮搜索关键字
weixin_43964779的博客
06-24 210
// 高亮搜索结果 highlights (searchResult) { const search = this.searchValue return searchResult.map(item => { let replaceReg = new RegExp(search, 'g')// 匹配关键字正则 let replaceString = '<span class="highlights-te...
纯css鼠标经过列表高亮显示
07-05
纯css鼠标经过列表高亮显示
对一个列表的内容进行关键字高亮显示
furfur-jiang的博客
07-16 319
boxArr是对应列表的类名 val是关键字 function HeightColor(val) { let boxArr = document.getElementsByClassName('title') for (let i = 0; i < boxArr.length; i++) { let arr = boxArr[i].innerHTML.split(val) boxArr[i].innerHTML = arr.join('<span styl
搜索完后，让搜索后的关键字高亮显示
海豚宝宝的专栏——专注于企业项目管理系统的开发
01-10 1130
绑定的时候,比如你的数据源是datatableif(keyword.Text != "" && keyword.Text != null ){for(int iloop =0 ;iloop dstemp.Tables[0].Rows[iloop]["name"] = dstemp.Tables[0].Rows[iloop]["name"].ToString().Replace(keyword.Te
在业务中如何做到在search搜索框中查找推荐处高亮显示
weixin_46192081的博客
06-12 160
在业务中如何做到在search搜索框中查找高亮显示？ 我们通常会使用字符串替换的方式来做到高亮的效果 "iphone12" ------> '<span style="color:red">iph</span>one12' function f (源字符串，要高亮的片段) {} var str = 'iphone12', var keyword = 'iph' f(str, keyword) ===> '<span style="color:red"&
一分钟让你学会做搜索关键字高亮
m0_64564920的博客
04-11 2949
在我们的日常开发中，在搜索框去搜索一个内容，搜索的关键字高亮是一个比较常用的功能。例如下图所示： 我们可以看到，java四个字母是高亮的状态。 那么这个功能是怎么实现的呢？ 基本思路： 我们可以用正则表达式去匹配字符串，如果匹配成功了，就给他设置一个高亮的效果。 初步代码如下： 在这里插入代码片 ......
富文本关键字搜索高亮，解决方法及优化（收藏！）
程序员成长指北
07-11 1411
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群作者：猿猴望月原文：https://juejin.cn/post/7070688497929043998去年在冬季面试的时候，被某厂面试官问了这个问题：如果我们的数据是富文本，现在要加一个搜索功能，怎么样才能完美的实现高亮呢？当时回答的很粗糙，只答了提取出文字进行搜索，怎...
Vue.js通过filter实现搜索关键字高亮
混世大魔王ya的博客
09-19 784
在 Vue.js 中实现搜索关键字高亮是一项常见的任务，通过使用正则表达式和字符串替换，我们可以轻松地实现这个功能。首先，我们需要创建一个过滤器，用于在模板中实现搜索关键字高亮。在你的 Vue.js 组件的任何一个地方，你可以创建一个名为。一旦我们创建了过滤器，我们就可以在 Vue 组件的模板中应用这个过滤器了。在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。在上面的代码中，我们首先在模板中创建了一个输入框，用于输入搜索关键字。
Vue实现搜索关键词高亮显示
m0_59023970的博客
03-15 3693
vue关键词搜索高亮
高亮搜索中的关键字怎么实现
最新发布
夏天的博客
03-20 741
高亮搜索中的关键字怎么实现
vue搜索关键字高亮
05-31
2. 在模板中使用 v-model 指令绑定搜索框的值，并使用 v-for 指令循环渲染数据列表。例如： ``` (item)"> ``` 3. 在 Vue 组件中定义一个方法，用于高亮显示搜索结果。该方法接收一个字符串参数，返回一个字符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值