其他分享
首页 > 其他分享> > vue table列表高亮

vue 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