<select v-model="selectType1" class="form-control" >
<option value="ID"></option>
<option value="PASSPORT" :disabled="userRights ==='HKID'"></option>
</select>
有这么一个下拉选择框，我把第二项做了动态禁止，但是我想实现：鼠标悬浮在禁止的那项option，改变鼠标的样式，我加了行内样式，不管用。
系统生成的下拉option，无法更改。可以用第三方的控件来模拟select，这样可以控制，比如select2。简单示例如下。不过题主用到了vue，需要注意添加
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" type="text/css" rel="stylesheet" />
<style>
/*重写不允许选择的模拟容器curor样式*/
.select2-disabled div{cursor:not-allowed!important}
</style>
<select v-model="selectType1" class="form-control" id="sel">
<option value="PASSPORT" disabled>1111</option>
<option value="2222">2222</option>
<option value="3334">3334</option>
</select>
<script src="http://select2.github.io/select2/js/jquery-1.7.1.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<script>
$("select").on('select2-selecting', (e) => {
alert(e.val);//要用到this.selectType1=e.value更新model
}).select2();
</script>