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