Vuejs2 Vue元素UI动态更改el select颜色

我试图修改el select以匹配el选项的颜色。 我在Internet上搜索的方法总是要求我修改样式范围。它是一种静态方法，不能动态更改

我的期望是，当我在选项中选择WIP时，它将根据选项中的颜色在el select中变成黄色标签

下面是我在Codesandbox中创建的一个粗略演示

---

非常感谢您的帮助。

您可以根据所选值设置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>

SCSS：

---

经过大量的研究，我终于找到了解决办法

下面是我在Codesandbox中创建的一个粗略演示。

我不确定这是否是最好的方法，但这种方法解决了我的问题。如果您有更好的解决方案，欢迎在这里提供

---

多谢各位

谢谢你的回复。您的方法是有效的，但与我预期的不同。您可以检查，我的选项状态颜色是从数据库中获取的。状态列表：[{id:1，名称：已批准，颜色：00A86B，}，{id:2，名称：重新制作，颜色：ED2939，}，{id:3，名称：在制品，颜色：FCE205，}，]，@Coleone元素ui不提供任何属性或东西来操纵元素本身的样式。如果那是你要找的地方，我就要解雇你，因为没有。另一种方法是稍微修改一下，使用前缀来显示值+颜色，并用cssHi@dreijntjens隐藏de-actual值，你能给我提供有关使用前缀来显示值+颜色和用CSS隐藏de-actual值的详细信息吗？

  methods: {
    getStatusColorClass(id) {
      if (!id) {
        return {};
      }

      return this.statusList.find(status => status.id === id).name;
    }
  }

<style lang="scss">
.Approved input {
  color: #00A86B;
}
.Retake input {
  color: #ED2939;
}
.WIP input {
  color: #FCE205;
}
</style>