我试图修改el-select以匹配el-option的颜色。 我在Internet上搜索的方法始终要求我修改范围内的样式。这是一种静态方法,不能动态更改。
我的期望是,当我在选项中选择“在制品”时,根据选项中的颜色,它将在el-select中变成黄色标签。
以下是我在Codesandbox中创建的粗略演示。
非常感谢您的帮助,非常感谢。
答案 0 :(得分:1)
您可以基于el-select
的类别进行设置,以便可以根据所选值为输入值着色
<el-select
v-model="scope.row.status"
:class="getStatusColorClass(scope.row.status)"
placeholder="Select"
>
<el-option
v-for="(status, index) in statusList"
:key="index"
:label="status.name"
:value="status.id"
>
<span :style="{ color: status.color }">{{ status.name }}</span>
</el-option>
</el-select>
JS:
methods: {
getStatusColorClass(id) {
if (!id) {
return {};
}
return this.statusList.find(status => status.id === id).name;
}
}
SCSS:
<style lang="scss">
.Approved input {
color: #00A86B;
}
.Retake input {
color: #ED2939;
}
.WIP input {
color: #FCE205;
}
</style>
答案 1 :(得分:0)
以下是我在Codesandbox中创建的粗略演示。 https://codesandbox.io/s/dynamically-change-el-select-color-based-on-status-v2-od8gn?file=/src/views/Editor.vue
我不确定这是否是最好的方法,但是这种方法解决了我的问题。如果您有更好的解决方案,欢迎在此处提供。
非常感谢您!