Element UI 如何改变select选择框自身的字体颜色

遇到一个需求是做一个select选择框，el-option有两个可供选择的数据。

需要根据select选择框的下拉数据不同，将选择完后的select自身的字体颜色改变。

我在网上进行查找发现全都是对select下面的el-option选择项进行字体颜色修改的解决方法，没有对选择完后的动态改变字体颜色的方法。

这里提供一个解决方法：

<el-table-column align="center" label="XXXX">
    <template slot-scope="scope">
        <el-select v-if="scope.row.A === 0" v-model.number="scope.row.A">
            <el-option v-for="item in A_list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-select class="special-color" v-else v-model.number="scope.row.A">
            <el-option v-for="item in A_list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
    </template>
</el-table-column>

<style>
.special-color .el-input--suffix .el-input__inner {
    color: red;
}
</style>

这里首选用v-if对下拉选择后的值进行判断

如果是需要改变字体颜色的值，就给他一个专属的class名

在<style>中按如上的代码填写，实际的字体颜色可以按需进行修改。

实测如果是在 <style scoped>中是无法生效的。

如果没有专属的class或者id，<style>就无法定位这类选择框而会导致全局所有选择框生效。