下拉框是渐变色

子组件代码

template>
  <el-select
    ref="colorSelect"
    v-model="myColor"
    placeholder=""
    style="width: 100%; height:20px;"
    @change="handleChange"
  >
    <el-option
      v-for="(item, index) in colorList"
      :key="index"
      label=" "
      :value="item.colorSystem"
      :style="{
        background: item.color,
        width: '100%',
        height: '20px',
        margin: '2px 0',
      }"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'ColorSelect',
  // 允许一个自定义组件在使用 v-model 时定制 prop 和 event。
  // 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，
 // 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。
 // 使用 model 选项可以回避这些情况产生的冲突。
  model: {
    prop: 'color', // 接收的父组件的值
    event: 'update' // 更新的事件
  },
  props: {
    // 颜色数组
    colorList: {
      type: Array,
      default: () => {}
    },
    // 父组件绑定的值
    color: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myColor: undefined
    }
  },
  watch: {
    color(val) {
      this.myColor = this.color
      this.setSelectColor(val)
    }
  },
  created() {
    if (this.color && this.color.length > 0) {
      this.myColor = this.color
      this.setSelectColor(this.color)
    }
    console.log(this.color)
  },
  methods: {
    colorSelect(item) {
      console.log(item)
    },
    // 设置颜色选择框中颜色
    setSelectColor(color) {
      console.log(color)
      // 通过操作dom节点改变样式
      this.$nextTick(() => {
        let renderColor
        this.colorList.forEach((item) => {
          if (item.colorSystem === color) {
            renderColor = item.color
          }
        })
        let dom = this.$refs.colorSelect
        if (dom) {
          dom = dom.$el.children[0]
          const inputDom = dom.querySelectorAll('.el-input__inner')
          const icon = dom.querySelectorAll('.el-input__icon')
          inputDom[0].style.background = renderColor
          icon[0].style.color = 'black'
        }
      })
    },
    handleChange(val) {
      console.log(val)
      this.setSelectColor(val)
      // 触发update事件更新父组件绑定值
      this.$emit('update', val)
    }
  }
}
</script>

<style scoped>
::v-deep .el-select-dropdown__list {
  padding: 0 !important;
}
::v-deep .el-input__inner{
  height:35px !important;
}
</style>

父组件引用
template的内容

<color-select
  :color-list="colorList"
  :color="color"
  size="small"
  style="width: 160px"
  @update="update"
 ></color-select>
//备注
//colorList：[] 下拉框颜色：渐变色是字符串
//color: '', // 可设置下拉框颜色默认值：Set1
//update:类似于change事件，可以写一些切换颜色选择后的代码逻辑