Vue元素UI动态更改El-Select颜色

问题描述

我试图修改el-select以匹配el-option的颜色。 我在Internet上搜索的方法始终要求我修改范围内的样式。这是一种静态方法，不能动态更改。

我的期望是，当我在选项中选择“在制品”时，根据选项中的颜色，它将在el-select中变成黄色标签。

---

以下是我在CodesandBox中创建的粗略演示。

https://codesandbox.io/s/dynamically-change-el-select-color-based-on-status-v0u8d?file=/src/views/Editor.vue

非常感谢您的帮助，非常感谢。

解决方法

您可以基于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>

,

经过大量研究，终于找到了解决方案。

以下是我在Codesandbox中创建的粗略演示。 https://codesandbox.io/s/dynamically-change-el-select-color-based-on-status-v2-od8gn?file=/src/views/Editor.vue

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

非常感谢您！