<el-table-column prop="cycles" label="事项" > <template slot-scope="scope"> <span v-if="scope.row.status == '正常' " style="color: red;"></span> </template> </el-table-column>如何判断如果内容包含正常两个字就让正常两个字为红色其他的为黑色
时间: 2024-01-03 16:24:03 浏览: 64
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
您可以使用 `v-if` 条件渲染语句来判断表格内容中是否包含 "正常",如果包含则将这个关键词用 `<span>` 标签包裹起来并设置为红色,否则不做处理。具体的代码如下:
```
<el-table-column prop="cycles" label="事项">
<template slot-scope="scope">
<span v-if="scope.row.cycles.indexOf('正常') !== -1">
<span style="color: red;">正常</span>
{{ scope.row.cycles.replace('正常', '') }}
</span>
<span v-else>{{ scope.row.cycles }}</span>
</template>
</el-table-column>
```
在这个代码中,我使用了 `indexOf()` 方法来判断表格内容中是否包含 "正常",如果包含则将这个关键词用 `<span>` 标签包裹起来并设置为红色,否则不做处理。我还使用了 `replace()` 方法来将包含 "正常" 的文本从表格内容中移除,以避免重复显示。
阅读全文