<el-table-column label="报名状态" align="center" prop="studentStatus"> <template #default="scope"> <span v-if="scope.row.studentStatus === 0">未入场</span> <span v-if="scope.row.studentStatus === 1">已入场</span> <span v-if="scope.row.studentStatus === 2">已离场</span> <span v-if="scope.row.studentStatus === 3">已退费</span> </template> </el-table-column>怎么设置当为0时color变成红色为1是变成绿色为2时变成蓝色
时间: 2023-12-20 15:07:04 浏览: 30
你可以在每个 `span` 标签上添加相应的 `style` 属性来设置文本颜色,具体实现如下:
```html
<el-table-column label="报名状态" align="center" prop="studentStatus">
<template #default="scope">
<span v-if="scope.row.studentStatus === 0" style="color: red">未入场</span>
<span v-if="scope.row.studentStatus === 1" style="color: green">已入场</span>
<span v-if="scope.row.studentStatus === 2" style="color: blue">已离场</span>
<span v-if="scope.row.studentStatus === 3">已退费</span>
</template>
</el-table-column>
```
这样就可以实现当 `studentStatus` 为 0 时文本颜色为红色,为 1 时为绿色,为 2 时为蓝色。注意,当 `studentStatus` 为 3 时没有指定颜色,这时会使用默认颜色。
相关问题
<el-table v-loading=loading :data=directionList > <el-table-column label=流出区域id align=center prop=outAreaId /> <el-table-column label=流出区域 align=center prop=areaName /> 怎么将这两个参数关联起来并展示时两个参数是成双展示
你可以在模板中使用插槽来将这两个参数关联起来并成双展示。具体做法是在 el-table-column 中使用 scoped slot 来定义一个模板,并将 outAreaId 和 areaName 组合在一起展示。例如:
```html
<el-table v-loading="loading" :data="directionList">
<el-table-column label="流出区域id" align="center" prop="outAreaId">
<template slot-scope="{ row }">
{{ row.outAreaId }} - {{ row.areaName }}
</template>
</el-table-column>
</el-table>
```
在这个例子中,我们使用了 slot-scope 来获取当前行的数据对象 row,然后将 outAreaId 和 areaName 组合在一起展示。这样就可以将这两个参数关联起来并成双展示了。
<el-table-column label="报名状态" align="center" prop="studentStatus"> <template #default="scope"> <span v-if="scope.row.studentStatus === 0">未入场</span> <span v-if="scope.row.studentStatus === 1">已入场</span> <span v-if="scope.row.studentStatus === 2">已离场</span> <span v-if="scope.row.studentStatus === 3">已退费</span> </template> </el-table-column>怎么设置当为0时color变成红色为1是变成绿色
你使用 `v-bind` 指令来动态绑定 `style` 属性,根据 `scope.row.studentStatus` 的值来设置不同的样式。可以这样修改你的代码:
```
<el-table-column label="报名状态" align="center" prop="studentStatus">
<template #default="scope">
<span :style="{ color: scope.row.studentStatus === 0 ? 'red' : scope.row.studentStatus === 1 ? 'green' : '' }">
<span v-if="scope.row.studentStatus === 0">未入场</span>
<span v-if="scope.row.studentStatus === 1">已入场</span>
<span v-if="scope.row.studentStatus === 2">已离场</span>
<span v-if="scope.row.studentStatus === 3">已退费</span>
</span>
</template>
</el-table-column>
```
这里使用了三元运算符来判断 `scope.row.studentStatus` 的值,并根据不同的值设置不同的颜色。当 `scope.row.studentStatus` 为 0 时,字体颜色为红色;当为 1 时,字体颜色为绿色。如果是其他值,则不设置颜色。