vue回显数据 实现点击select框时触发onclick()事件，点击option选项时触发onchange()事件

需求：新增保存后进入该修改界面，点击select框时(未点击option选项前)，需要调用接口返回的数据触发option选项展示对应背景颜色的事件；点击option选项触发onchange()事件。

分析：直接给该select框同时设置onclick()和onchange()事件。但onclick()为啥不生效呢？

// 给el-select同时设置onclick和onchange事件，但onclick事件没有生效：
<el-select v-model="ruleForm.courseDetailId" style="width:220px;" clearable filterable  placeholder="请选择班次" @change="courseDetailIdChange" @click="getRankColor">
            <el-option :disabled="item.disabled" :style="{background:item.color}" v-for="(item,index) in courseDetailList||[]" :key="index" :label="item.name" :value="item.id"/>
          </el-select>

        是因为在组件上使用 onclick 监听点击事件，实际上是监听了组件内部封装的一个模拟点击事件，并不是真正的原生点击事件。它只能监听Vue组件内部元素的click事件，并且会阻止默认行为和事件冒泡。而我们想要直接监听原生的点击事件时，就需要在onclick事件上使用.native修饰符。 

        @click.native等同于在子组件内部处理click事件并向外发送click事件：$emit('click',fn)。用来监听Vue任何DOM元素的原生click事件，包括组件内嵌套的子组件和子元素。它不会对默认行为和事件冒泡进行任何处理。

        综上，为了避免对select框设置的click事件不失效，需要在以上代码的@click事件中加入修饰符.native即可。

//以下@click.native点击事件是生效的
<el-select v-model="ruleForm.courseDetailId" style="width:220px;" clearable filterable  placeholder="请选择班次" @change="courseDetailIdChange" @click.native="getRankColor">
            <el-option :disabled="item.disabled" :style="{background:item.color}" v-for="(item,index) in courseDetailList||[]" :key="index" :label="item.name" :value="item.id"/>
          </el-select>