<el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" width="150"></el-table-column> <el-table-column prop="ymatter" label="负责人" width="120"></el-table-column> <el-table-column prop="cycles" label="事项"></el-table-column> </el-table> </el-container>如何根据事项字段中的内容去给多个汉字或者结果配置不同的颜色
时间: 2023-10-11 13:09:41 浏览: 48
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
您可以使用 `formatter` 属性来自定义单元格的显示内容,并在其中使用 HTML 标签和样式来设置颜色。
例如,您可以使用以下代码来根据事项字段的内容设置不同的颜色:
```html
<el-table-column prop="cycles" label="事项" :formatter="row => {
if (row.cycles.includes('重要')) {
return '<span style=\"color: red;\">' + row.cycles + '</span>';
} else if (row.cycles.includes('紧急')) {
return '<span style=\"color: orange;\">' + row.cycles + '</span>';
} else {
return row.cycles;
}
}"></el-table-column>
```
在这个例子中,如果事项字段包含关键字“重要”,则使用红色字体显示该单元格;如果包含关键字“紧急”,则使用橙色字体显示该单元格;否则,使用默认的黑色字体显示该单元格。
您可以根据需要自定义更多的颜色和匹配规则来满足您的需求。
阅读全文