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

最新推荐文章于 2024-04-22 11:36:40 发布

zyu67

最新推荐文章于 2024-04-22 11:36:40 发布

阅读量1k

点赞数 11

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/zyu67/article/details/135084974

版权

本文介绍了如何在VueElement的el-table组件中实现搜索功能，通过v-html和自定义方法showDate，当搜索关键字与表格内容匹配时，将关键字高亮显示为红色。

摘要由CSDN通过智能技术生成

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
      }
    }

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