el-select中使用el-tooltip时,在下拉滚动时整个网页会出现滚动条,并抖动

问题:当使用组件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);
},

 这是我解决这个问题的方法,如果你们有其他方法,或对该问题有详细的认识,希望能留言告知,谢谢 

posted on 2020-10-15 08:57  ming1025  阅读(5179)  评论(0编辑  收藏  举报