• 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);
    },
    

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

  • 相关阅读:
    多线程学习
    Redis学习2
    Redis学习1
    封装
    创建对象内存分析
    稀疏数组
    反转数组、冒泡排序
    可变参数
    .net core 3.x Web Api + Docker个人练手项目
    .net 性能优化手段
  • 原文地址:https://www.cnblogs.com/ming1025/p/13818629.html
Copyright © 2020-2023  润新知