el-table 0正常 1不正常 并显示红色或者绿色
时间: 2024-04-14 15:30:54 浏览: 16
要在 el-table 中显示 "0" 为 "正常","1" 为 "不正常" 并根据不同的状态显示红色或绿色,您可以使用插槽和 class 绑定来实现。
首先,您可以在 el-table-column 中使用插槽来自定义字段的显示,并在插槽中添加 class 绑定。
以下是一个示例:
```html
<el-table :data="tableData">
<el-table-column label="状态">
<template slot-scope="scope">
<span :class="{ 'text-red': scope.row.status === 1, 'text-green': scope.row.status === 0 }">
{{ getStatusText(scope.row.status) }}
</span>
</template>
</el-table-column>
</el-table>
```
在上面的示例中,我们使用了 `getStatusText` 方法来返回相应的文本,并使用 class 绑定来根据不同的状态添加不同的颜色样式。
接下来,您可以在 CSS 中定义 `.text-red` 和 `.text-green` 类的样式,例如:
```css
.text-red {
color: red;
}
.text-green {
color: green;
}
```
这样,当 `status` 的值为 1 时,文本将显示为红色;当 `status` 的值为 0 时,文本将显示为绿色。
请根据您的实际需求和样式定义进行相应的调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)