效果图
html部分
<template v-for="(item, i) in tableConfig">
<el-table-column :key="i" :label="item.label" :prop="item.prop">
<template slot-scope="scope">
<span v-html="scope.row[item.prop]"></span>
</template>
</el-table-column>
</template>
js部分
搜索按钮点击事件搜索后循环数据,匹配名字,替换为包裹数据的变红标签
async mySearch() {
await this.getDataOrigin();
this.tableData.forEach((el, i) => {
if (el.Name.indexOf(this.queryParams.Keyword) !== -1) {
el.Name = el.Name.replace(
this.queryParams.Keyword,
'<font color="#f00">' + this.queryParams.Keyword + "</font>"
);
}
});
}