<el-table-column prop="cycles" label="事项"> <template slot-scope="scope"> <span v-html="scope.row.cycles.replace(/正常/g, '<span style=\'color:red\'>正常</span>')"></span> </template> </el-table-column>将此代码增加判断,包含正常的将正常二次变为红色,包含不正常的将不正常二次变为绿色
时间: 2024-03-27 14:40:09 浏览: 49
您可以在 `getColor` 方法中修改代码,先判断字符串中是否包含 "正常" 或 "不正常",然后根据情况将其替换为带有颜色样式的 span 标签。下面是一个示例代码:
```html
<el-table-column prop="cycles" label="事项">
<template slot-scope="scope">
<span v-html="getColor(scope.row.cycles)"></span>
</template>
</el-table-column>
methods: {
getColor(cycles) {
if (cycles.includes('正常')) {
cycles = cycles.replace(/正常/g, '<span style=\'color:red\'>正常</span><span style=\'color:red\'>正常</span>');
}
if (cycles.includes('不正常')) {
cycles = cycles.replace(/不正常/g, '<span style=\'color:green\'>不正常</span><span style=\'color:green\'>不正常</span>');
}
return cycles;
}
}
```
这里使用了 `includes` 方法来判断字符串中是否包含 "正常" 或 "不正常",然后根据情况将其替换为带有颜色样式的 span 标签。注意,这里使用了两个 span 标签来实现将字符串二次变色的效果。您可以根据需要更改样式或标签。
阅读全文