动态修改el-select 选中的值字体颜色 和下拉框字体颜色

    <el-table-column label="优先级" width="120">
              <template slot-scope="scope">
                <div
                  :class="{ 'priorit1': scope.row.taskLevel === 1, 'priorit2': 
                   scope.row.taskLevel === 2, 'priorit3': scope.row.taskLevel === 3, 
                   'priorit4':scope.row.taskLevel === 4 }">
                  <el-select v-model="scope.row.taskLevel" 
                     @change="precedence(scope.$index, scope.row)"
                    :style="selectItemStyle">
                    <el-option v-for="item in preceden" :key="item.value" 
                      :label="item.label" :value="item.value"
                      :style="{ color: priorityColor(item.value) }" />
                  </el-select>
                </div>
              </template>
            </el-table-column>



  methods: {

    priorityColor(value) {
      switch (value) {
        case 1:
          return 'red'; // 紧急 - 红色
        case 2:
          return 'orange'; // 高 - 橙色
        case 3:
          return 'blue'; // 中 - 蓝色
        case 4:
          return 'green'; // 低 - 绿色
        default:
          return 'black'; // 默认为黑色
      }
    },
}



::v-deep .priorit1 .el-input__inner {
  color: red;
}

::v-deep .priorit2 .el-input__inner {
  color: orange;
}

::v-deep .priorit3 .el-input__inner {
  color: blue;
}

::v-deep .priorit4 .el-input__inner {
  color: green;
}

     <el-table-column label="优先级" width="120">

              <template slot-scope="scope">

                <div   :class="{ 'priorit1': scope.row.taskLevel === 1, 'priorit2': scope.row.taskLevel === 2,      'priorit3': scope.row.taskLevel === 3, 'priorit4': scope.row.taskLevel === 4 }">

                  <el-select v-model="scope.row.taskLevel" @change="precedence(scope.$index,                                scope.row)" :style="selectItemStyle">

                    <el-option v-for="item in preceden" :key="item.value" :label="item.label"                                               :value="item.value   :style="{ color: priorityColor(item.value) }" />

                  </el-select>

                </div>

       </template>

 </el-table-column>

1.修改下拉框的字体颜色

  <el-option v-for="item in preceden" :key="item.value" :label="item.label"                                               :value="item.value   :style="{ color: priorityColor(item.value) }" /> 

在el-option 里边添加:style="{ color: priorityColor(item.value) }"  

  methods: {

priorityColor(value) {

      switch (value) {

        case 1:

          return 'red'; // 紧急 - 红色

        case 2:

          return 'orange'; // 高 - 橙色

        case 3:

          return 'blue'; // 中 - 蓝色

        case 4:

          return 'green'; // 低 - 绿色

}

    },

2.el-select 选中的值字体颜色 

在.el-select  使用div 包裹   动态添加类名   根据scope.row.taskLevel  值添加不同的类名

  <div   :class="{ 'priorit1': scope.row.taskLevel === 1, 'priorit2': scope.row.taskLevel === 2,      'priorit3': scope.row.taskLevel === 3, 'priorit4': scope.row.taskLevel === 4 }">

<style scoped lang="scss">

::v-deep .priorit1 .el-input__inner {

  color: red;

}

::v-deep .priorit2 .el-input__inner {

  color: orange;

}

::v-deep .priorit3 .el-input__inner {

  color: blue;

}

::v-deep .priorit4 .el-input__inner {

  color: green;

}

</style >

虽然办法笨   但可行