将后台返回的数据进行一个重新赋值,使用一个数组,将需要的关键字放入数组中,进行一个循环遍历,使用字符串replaceAll()方法进行替换,在重新赋值,在使用vue3插槽加v-html
let contents = state.maintenanceRecord;
let arr = ["拆卸", "更换", "钣金", "漆"];
for (let i = 0; i < contents.length; i++) {
let text = contents[i].content;
for (let j = 0; j < arr.length; j++) {
text = text.replaceAll(arr[j], `<span style='color:red;'>${arr[j]}</span>`);
contents[i].content = text
}
}
state.maintenanceRecord = contents
// console.log("@", state.maintenanceRecord);
});
//使用vue的插值表达式 加 v-html
<el-table-column label="项目" header-align="center" align="center">
<template v-slot="scope">
<div v-html="scope.row.content"></div>
</template>
</el-table-column>