ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue table列表高亮

2021-12-30 09:58:00  阅读:243  来源: 互联网

标签:searchKey vue 高亮 && val includes return key table


html块:

<template v-for="item in tableColumnList">
          <el-table-column
            :prop="item.label"
            :label="item.label"
            v-if="viewKey[item.label] && tableft"
            v-loading="loading"
            align="center"
          >
            <template slot-scope="scope">
              <!-- <span v-if="item.template == 'timestamps'">
                {{ scope.row[item.label] | datetimeFormat }}
              </span> -->
              <!-- <span v-html="showDate(scope.row['_source'][item.label])">{{
                scope.row["_source"][item.label]
              }}</span> -->
              <span
                v-html="showDate(scope.row['_source'][item.label], item.label)"
              ></span>
            </template>
          </el-table-column>
        </template>

js:

showDate(val, key) {
      // if(key === 'timestamps'){
      //   return val
      // }
      // if(key !=='rawMessage'){
      //   return val;
      // }
      if (typeof val !== "string") {
        return val;
      }
      let searchKey = this.searchss;
      if (searchKey && searchKey.includes(":")) {
        if (!searchKey.includes(key)) {
          return val;
        }
        let arr = searchKey.split(":");
        searchKey = arr[1];
      }
      // console.log(val,'val==========')
      if (val && val.includes(searchKey) && searchKey) {
        val = val.replace(
          eval("/" + searchKey + "/g"),
          "<font  style='background-color: #DAE8FF;'>" + searchKey + "</b>"
        );
      }
      return val;
    },

标签:searchKey,vue,高亮,&&,val,includes,return,key,table
来源: https://blog.csdn.net/xiaolei1888/article/details/122229760

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有