element select下拉框颜色

<template>
	<div class="my-ui">
		    <el-select
		      v-model="value"
		      clearable
		      filterable
		      style="width: 140px"
		      placeholder="请选择"
			  :popper-append-to-body="false"
			  ref="colorDiv"
			  @change="selectHandle($event)"
			  class="select-ui"
		    >
		      <el-option
		        v-for="item in options"
		        v-bind:key="item.value"
		        :label="item.label"
		        :value="item.value"
				v-html="
		           `<span style='color:${getUrgencyColor(item.value)}' title='${item.value}'
				   
				   >${item.label}</span>` "

		      ></el-option>
		    </el-select>
	</div>
</template>
<script>

export default {
    data() {
      return {
        options: [{
                  value: '1',
                  label: '黄金糕',
				  
                }, {
                  value: '2',
                  label: '双皮奶',
				 
                }, {
                  value: '3',
                  label: '蚵仔煎',
				  
                }, {
                  value: '4',
                  label: '龙须面',
				 
                }, {
                  value: '5',
                  label: '北京烤鸭',
				  
                }],
                value: ''
      }
    },
	created() {

	},
	mounted() {
    
  },
	methods:{
		  // 获取紧急程度颜色
		    getUrgencyColor(code) {
		      if (code == 1) {
		        return "red";
		      } else if (code == 2) {
		        return "orange";
		      } else if (code == 3) {
		        return "blue";
		      } else if (code == 4) {
		        return "green";
		      } else if (code == 5) {
		        return "block";
		      }
		      // return "block";
		    },
		selectHandle(e){
			// console.log('value值：',e)
			
			let obj = this.options.find((item,i)=>{
				return item.value == e
			})
			// console.log('obj',obj)
			let classname = ''
			if(obj.value==1){
				classname = 'red'
			}
			if(obj.value==2){
				classname = 'orange'
			}
			if(obj.value==3){
				classname = 'blue'
			}
			if(obj.value==4){
				classname = 'green'
			}
			if(obj.value==5){
				classname = 'block'
			}
			
			let that = this
			 this.$nextTick(() => {
				// console.log('$nextTick')
				
				let animals = ['red', 'orange', 'blue', 'green', 'block']
				let Having = animals.includes(classname) // true
				
				this.$refs.colorDiv.$el.classList.remove('red')
				this.$refs.colorDiv.$el.classList.remove('orange')
				this.$refs.colorDiv.$el.classList.remove('blue')
				this.$refs.colorDiv.$el.classList.remove('green')
				this.$refs.colorDiv.$el.classList.remove('block')
				 
				this.$refs.colorDiv.$el.classList.add(classname)
			})
		},
		
	}
}
</script>

<style lang="scss">
.my-ui{
	.red{
		span{
			color: red;
		}
	}
	.orange{
		span{
			color: orange;
		}
	}
	.blue{
		span{
			color: blue;
		}
	}
	.green{
		span{
			color: green;
		}
	}
	.block{
		span{
			color: #000;
		}
	}
}

</style>