<el-table-column label="优先级" width="120">
<template slot-scope="scope">
<div
:class="{ 'priorit1': scope.row.taskLevel === 1, 'priorit2':
scope.row.taskLevel === 2, 'priorit3': scope.row.taskLevel === 3,
'priorit4':scope.row.taskLevel === 4 }">
<el-select v-model="scope.row.taskLevel"
@change="precedence(scope.$index, scope.row)"
:style="selectItemStyle">
<el-option v-for="item in preceden" :key="item.value"
:label="item.label" :value="item.value"
:style="{ color: priorityColor(item.value) }" />
</el-select>
</div>
</template>
</el-table-column>
methods: {
priorityColor(value) {
switch (value) {
case 1:
return 'red'; // 紧急 - 红色
case 2:
return 'orange'; // 高 - 橙色
case 3:
return 'blue'; // 中 - 蓝色
case 4:
return 'green'; // 低 - 绿色
default:
return 'black'; // 默认为黑色
}
},
}
::v-deep .priorit1 .el-input__inner {
color: red;
}
::v-deep .priorit2 .el-input__inner {
color: orange;
}
::v-deep .priorit3 .el-input__inner {
color: blue;
}
::v-deep .priorit4 .el-input__inner {
color: green;
}<el-table-column label="优先级" width="120">
<template slot-scope="scope">
<div :class="{ 'priorit1': scope.row.taskLevel === 1, 'priorit2': scope.row.taskLevel === 2, 'priorit3': scope.row.taskLevel === 3, 'priorit4': scope.row.taskLevel === 4 }">
<el-select v-model="scope.row.taskLevel" @change="precedence(scope.$index, scope.row)" :style="selectItemStyle">
<el-option v-for="item in preceden" :key="item.value" :label="item.label" :value="item.value :style="{ color: priorityColor(item.value) }" />
</el-select>
</div>
</template>
</el-table-column>
1.修改下拉框的字体颜色
<el-option v-for="item in preceden" :key="item.value" :label="item.label" :value="item.value :style="{ color: priorityColor(item.value) }" />
在el-option 里边添加:style="{ color: priorityColor(item.value) }"
methods: {
priorityColor(value) {
switch (value) {
case 1:
return 'red'; // 紧急 - 红色
case 2:
return 'orange'; // 高 - 橙色
case 3:
return 'blue'; // 中 - 蓝色
case 4:
return 'green'; // 低 - 绿色
}
},
2.el-select 选中的值字体颜色
在.el-select 使用div 包裹 动态添加类名 根据scope.row.taskLevel 值添加不同的类名
<div :class="{ 'priorit1': scope.row.taskLevel === 1, 'priorit2': scope.row.taskLevel === 2, 'priorit3': scope.row.taskLevel === 3, 'priorit4': scope.row.taskLevel === 4 }">
<style scoped lang="scss">
::v-deep .priorit1 .el-input__inner {
color: red;
}
::v-deep .priorit2 .el-input__inner {
color: orange;
}
::v-deep .priorit3 .el-input__inner {
color: blue;
}
::v-deep .priorit4 .el-input__inner {
color: green;
}
</style >
虽然办法笨 但可行
标签：__,el,颜色,color,deep,字体,inner,return,下拉框 From： https://blog.csdn.net/wanyu729/article/details/140802718