问题：当使用组件el-select时，如果在el-option上使用el-tooltip组件时，在下拉选项比较多时进行滚动，整个网页会出现抖动，并出现滚动条。
代码如下：
<el-select v-model="addForm.leader_id" placeholder="请选择科室负责人" filterable>
<el-option v-for="item in doctorList" :key="item.id" :label="item.realname" :value="item.id">
<el-tooltip placement="left">
<div slot="content">
姓名：{{item.realname}}<br><br>
角色：{{item | zroleTypeName}}<br><br>
工号：{{item.username}}<br><br>
电话：{{item.phone}}
</div>
<div>{{ item.realname }}</div>
</el-tooltip>
</el-option>
</el-select>
解决办法：
第一步：在main.js自定义指令监听el-select的滚动事件以及滚动结束事件，代码如下：
Vue.directive('scrollEvent', {//监听滚动事件
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function() {
binding.value();
});
}
})
Vue.directive('scrollEnd', {//监听滚动结束事件
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
var timer;
SELECTWRAP_DOM.addEventListener('scroll', function() {
if (timer) clearTimeout(timer);
timer = setTimeout(function(){
binding.value();
},1000);
});
}
})
第二步：在使用了el-tooltip组件的el-select上添加v-scroll-event以及v-scroll-end监听事件，代码如下：
<el-select v-model="addForm.leader_id" v-scroll-event="listenScroll" v-scroll-end="endScroll" placeholder="请选择科室负责人" filterable>
<el-option v-for="item in doctorList" :key="item.id" :label="item.realname" :value="item.id">
<el-tooltip placement="left">
<div slot="content">
姓名：{{item.realname}}<br><br>
角色：{{item | zroleTypeName}}<br><br>
工号：{{item.username}}<br><br>
电话：{{item.phone}}
</div>
<div>{{ item.realname }}</div>
</el-tooltip>
</el-option>
</el-select>
第三步：在methods中定义listenScroll以及endScroll方法，代码如下：
listenScroll () {
document.querySelector("html").style["overflow"] = "hidden";
},
endScroll () {
setTimeout(function (){
document.querySelector("html").style["overflow"] = "auto";
},1000);
},
这是我解决这个问题的方法，如果你们有其他方法，或对该问题有详细的认识，希望能留言告知，谢谢