Vue Element UI 动态改变 el-select 颜色

Question

我尝试修改 el-select 以匹配 el-option 的颜色。我在网上搜索的方法总是要求我修改样式 scoped 。它是一个静态方法，不能动态改变。

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

以下是我在Codesandbox中制作的粗略demo。

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

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

Answer 1

您可以设置 el-select 的 class 基于您可以根据所选值为输入值着色

<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>

Answer 2

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

下面是我在Codesandbox中制作的一个粗略的demo。 https://codesandbox.io/s/dynamically-change-el-select-color-based-on-status-v2-od8gn?file=/src/views/Editor.vue

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

非常感谢！

Vue Element UI 动态改变 el-select 颜色

Vue Element UI dynamically changes el-select color

vuejs2

element-ui